ホームページ > 記事 > ウェブフロントエンド > CSSセレクターの新しい使い方の詳細な説明
CSSセレクターの新しい使い方の詳細な説明
- 小云云オリジナル
- 2018-02-05 10:18:421842ブラウズ
今では、数年前に 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 つのコードは同じ効果があります
セレクターのネスト
:--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 表記 &
として記述される新しいセレクター、ネストされたセレクターを定義します。ネストされたスタイル ルールのセレクターで使用される場合、ネストされたセレクターは、親ルールと一致する選択を表します。他の文脈で使用された場合、何も意味しません。 (つまり、有効ではあるが、どの要素とも一致しない)
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 プラグインはすべての問題を解決できます
CSS セレクター フィールド解析の実装方法
CSSセレクターセレクターの詳しい説明
CSSセレクターのドット(.)の解決策
以上がCSSセレクターの新しい使い方の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。