現在，預處理器(如sass)似乎已經成爲開發CSS的標配，正如幾年前jQuery是開發JS的標配一樣。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，意思是將20px賦值給–example-varibale變量
可以將聲明變量的語句置於任何元素內，如果要設置全局變量，則可以設置爲:root、body或html
:root{--bgColor:#000;}
變量聲明就像普通的樣式聲明語句一樣，也可以使用內聯樣式
<body style="--bgColor:#000">
【使用變量】
使用var()函數使用變量，並且可以被使用在任意的地方。例如：var(–example-variable)會返回–example-variable所對應的值
<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()相比，@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;
這樣，:–heading就成爲一個可以使用的選擇器
:--heading{
margin: 0;
}
h1, h2, h3, h4, h5, h6｛
margin: 0;
｝
上面兩段代碼的效果相同
選擇器嵌套
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 {
& 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;
}
}
當使用嵌套樣式規則時，必須能夠引用由父規則匹配的元素; 畢竟是整個嵌套點。爲了達到這個目的，這個規範定義了一個新的選擇器，即嵌套選擇器，寫成ASCII符號＆
當在嵌套樣式規則的選擇器中使用時，嵌套選擇器表示由父規則匹配的元素。在任何其他情況下使用時，它什麼都不代表。（也就是說，它是有效的，但不匹配任何元素）
注意：&嵌套選擇符的兩種錯誤寫法如下所示
.foo {
color: red;
.bar & { color:blue; }
}
.foo {
color: red;
&.bar, .baz { color: blue; }
}
【@nest】
爲了解決上面的嵌套選擇符&的脆弱，可以使用@nest選擇符，@nest可適用範圍更廣，只要與嵌套選擇符&共同作用即可
.foo {
color: red;
@nest & > .bar {
color: blue;
}
}
//等價於
.foo { color: red; }
.foo > .bar { color: blue; }
.foo {
color: red;
@nest .parent & {
color: blue;
}
}
//等價於
.foo { color: red; }
.parent .foo { color: blue; }
.foo {
color: red;
@nest :not(&) {
color: blue;
}
}
//等價於
.foo { color: red; }
:not(.foo) { color: blue; }
注意：@nest選擇符的兩種錯誤寫法如下所示
.foo {
color: red;
@nest .bar {
color: blue;
}
}
.foo {
color: red;
@nest & .bar, .baz {
color: blue;
}
}
專門建立的學習Q-q-u-n： 731771211，分享學習方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
最後
遺憾地是，除了CSS變量variable可以在新版本chrome下使用外，其他CSS選擇器的新用法目前都沒有瀏覽器支持。但是，CSS後處理器postcss中的cssnext插件可以解決所有問題
就像cssnext官網說的一樣，今天就開始使用明天的CSS語法