CSSセレクターの新しい使い方の詳細な説明-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSセレクターの新しい使い方の詳細な説明

小云云

Feb 05, 2018 am 10:18 AM

cssセレクタ

今では、数年前に jQuery が JS 開発の標準であったのと同じように、プリプロセッサ (sass など) が CSS 開発の標準になっているようです。 JS の querySelector は jQuery のセレクターのアイデアを利用しており、CSS セレクターもプリプロセッサ変数の定義、セレクターのネスト、コードブロックの再利用などの一般的な機能を利用しています。この記事では、CSSセレクターの新しい使い方を詳しく紹介します。

変数

一般に、Web開発を行う場合、以下に示すように、sassを例として一連の変数定義仕様を用意します

// 颜色定义规范
$color-background : #222
$color-background-d : rgba(0, 0, 0, 0.3)
$color-highlight-background : #333
//字体定义规范
$font-size-small : 12px
$font-size-medium : 14px
$font-size-large : 18px

CSS変数の構文は次のとおりです

【宣言変数】

変数は -- で始まる必要があります。たとえば、 --example-variable: 20px は、 --example-varibale 変数に 20px を割り当てることを意味します

変数を宣言するステートメントを任意の要素内に配置できます。グローバル変数を設定したい場合は、次のように設定できます。 : root, body or html

:root{--bgColor:#000;}

変数宣言は通常のスタイル宣言文と同じように、インラインスタイルも使えます

<body style="--bgColor:#000">

【変数の使い方】

var()関数を使って変数を使用すると、どこでも使用できます。例: var(--example-variable) は、--example-variable に対応する値を返します

<body style="--bgColor:#000;">
    <p style="width: 100px;height: 100px;background-color: var(--bgColor)"></p>    
</body>

var() 関数にはオプションのパラメーターもあります。これは、変数が変更されたときにデフォルト値を設定するために使用されます。値を取得できません

<p style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></p>

【注意】CSS変数の詳しい使い方はこちらに移動します

@apply

@applyを紹介する前に、まずはミキシングマクロ@mixinを紹介しましょう。 sassでは、再利用可能なコードブロックを指します

例えば、共通テキストオーバーフロー非表示再利用

@mixin overflow-ellipsis{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
p {
    @include  overflow-ellipsis;
}

そしてアプリケーションルールセット@applyも同様の機能を実装しています。 var() と比較すると、@apply はスタイルのコレクションを参照しますが、var() は単一のスタイル値を参照します

:root{
  --overflow-ellipsis:{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
}
.title{
  width:200px;
  @apply --overflow-ellipsis;
}

カスタムセレクター

カスタムセレクターは @custom-selector 定義を介して提供され、その後に次のようになります。 --次に、カスタムセレクターの名前、その後に定義する必要のあるセレクターをカンマで区切って複数指定します

@custom-selector :--heading h1, h2, h3, h4, h5, h6;

このように、:-見出しが使用可能な選択肢になります。上記の 2 つのコードは同じ効果があります

セレクターのネスト

CSS ルールには繰り返しのコンテンツが多く含まれています

:--heading{
  margin: 0;
}
h1, h2, h3, h4, h5, h6｛
   margin: 0; 
｝

ネストされた構文を使用した後のコードは次のようになります

table.colortable td {
  text-align:center;
}
table.colortable td.c {
  text-transform:uppercase;
}
table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}
table.colortable th {
  text-align:center;
  background:black;
  color:white;
}

ネストされたスタイルルールでは、親ルールと一致する要素を参照できなければなりません。結局のところ、それはネストポイント全体です。この目的を達成するために、この仕様では、ASCII 表記 &

として記述される新しいセレクター、ネストされたセレクターを定義します。ネストされたスタイルルールのセレクターで使用される場合、ネストされたセレクターは、親ルールと一致する選択を表します。他の文脈で使用された場合、何も意味しません。 (つまり、有効ではあるが、どの要素とも一致しない)

【注意】ネストされたセレクターの間違った書き方は以下の2つです

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

【@nest】

上記を解決するには、ネストされたセレクター & は脆弱です。@nest セレクターは、新しいバージョンの Chrome で使用できることを除いて、より幅広い用途に使用できます。 CSS セレクターの使用は現在ブラウザーではサポートされていません。しかし、CSS ポストプロセッサ postcss の cssnext プラグインはすべての問題を解決できます

cssnext 公式 Web サイトにあるように、今日から明日の CSS 構文を使い始めましょう

関連する推奨事項:

CSS セレクターフィールド解析の実装方法

CSSセレクターセレクターの詳しい説明

CSSセレクターのドット(.)の解決策

以上がCSSセレクターの新しい使い方の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。