CSSセレクタ新たな用途

さて、プリプロセッサは、（例えばSASSなど）CSSの開発の標準となっているようだ、jQueryのは、JSのように、標準を開発するために、ほんの数年前です。JS querySelectorは、jQueryのセレクタの考え方を描く、CSSセレクタは、共通の機能を再利用するプリプロセッサ変数の定義、ネストされたセレクタ、ブロックを描きます。この記事では、CSSセレクタの新しい使用を詳述します

変数

我々ウェブ開発が行われた場合、以下に示すように、一般的に、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変数の構文は次のとおりです

[可変]声明

変数はしなければならない--で始まります。例えば〜実施例変数：変数〜実施例-varibaleに割り当てられた20ピクセル、20ピクセルの意味

変数宣言文は、グローバル変数を設定したい場合は、あなたが設定することができ、任意の要素に配置することができます：ルート、身体またはHTML

:root{--bgColor:#000;}

通常のスタイル宣言文のような変数宣言は、あなたはまた、インラインスタイルを使用することができます

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

[用途]変数

使用VAR（）関数は、変数を使用し、任意の場所で使用することができます。例えば：VAR（〜実施例可変）〜実施例変数リターンに対応する値

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

VAR（）関数は、オプションのパラメータを有するデフォルト値、変数の値が得られない場合、デフォルト値を設定するために使用され

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

@apply

導入は@apply、混合SASSのマクロ@mixinを導入する前に、再利用可能なコードブロックを指し、

例えば、一般的なテキストのオーバーフロー隠された再利用

专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）
@mixin overflow-ellipsis{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
div {
    @include  overflow-ellipsis;
}

ルールセットの適用は@applyも同様の機能を実現します。VAR（）、@基準パターンのセット、および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;

このようにし,: - 使用することができ、セレクタになることを見出し

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

上記2つの符号の同じ効果

ネストされたセレクタ

CSSルールは、多くの重複コンテンツが含まれています

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;
}

次のようにネストされた構文を使用し、

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

ネストされたスタイルルールを使用するときは、親ルールで一致した要素を参照することができなければなりません。ポイント全体の巣の後。この目的のために、この仕様はASCIIシンボルとして書かれた新しいオプション、すなわちネストされたセレクタを定義＆

ネストされたスタイルルールセレクタで使用される場合、ネストされたセレクタ要素は、親マッチング規則で表されます。その他の場合で使用する場合、それが何を意味するものではありません。（言い換えれば、それは有効ですが、任意の要素と一致していません）

注：以下に示す2誤ったネストされた書き込み＆セレクタ

.foo {
  color: red;
  .bar &amp; { color:blue; }
}
.foo {
  color: red;
  &amp;.bar, .baz { color: blue; }
}

【@ネスト】

上記のネストされたセレクター＆の脆弱性に対処するためには、ネストされたセレクタ＆への共同行動する限り、より広い範囲に適用巣@、@nestセレクタを使用することができます

.foo {
  color: red;
  @nest &amp; > .bar {
    color: blue;
  }
}
//等价于
   .foo { color: red; }
   .foo > .bar { color: blue; }

.foo {
  color: red;
  @nest .parent &amp; {
    color: blue;
  }
}
//等价于
   .foo { color: red; }
   .parent .foo { color: blue; }

.foo {
  color: red;
  @nest :not(&amp;) {
    color: blue;
  }
}
//等价于
   .foo { color: red; }
   :not(.foo) { color: blue; }

注：次のように書かれて@nestセレクタ2つのエラー

.foo {
  color: red;
  @nest .bar {
    color: blue;
  }
}
.foo {
  color: red;
  @nest &amp; .bar, .baz {
    color: blue;
  }
}
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

遂に

CSS変数変数に加えて、クロムの新しいバージョンで使用することができます残念ながら、他の新しい用途のCSSセレクタは現在、ブラウザサポートされません。しかし、cssnextプラグCSSポストプロセッサpostcssはすべての問題を解決することができます

cssnext公式サイトが同じ今日言ったように、明日はCSSの構文を使用して開始します

プログラミングの世界 - クラウド

公開された267元の記事・ウォンの賞賛9 ・ビュー10000 +

プライベートの手紙の懸念

変数

@apply

カスタムセレクタ

ネストされたセレクタ

遂に

おすすめ