前面的話
現(xiàn)在，預(yù)處理器(如sass)似乎已經(jīng)成為開發(fā)CSS的標(biāo)配，正如幾年前jQuery是開發(fā)JS的標(biāo)配一樣。JS的querySelector借鑒了jQuery的選擇器思想，CSS選擇器也借鑒了預(yù)處理器的變量定義、選擇器嵌套、代碼塊重用等常用功能。本文將詳細(xì)介紹CSS選擇器的新用法
變量
一般地，我們在進(jìn)行web開發(fā)時(shí)，會(huì)有一套變量定義規(guī)范，以sass為例，如下所示
// 顏色定義規(guī)范$color-background : #222$color-background-d : rgba(0, 0, 0, 0.3)$color-highlight-background : #333//字體定義規(guī)范$font-size-small : 12px$font-size-medium : 14px$font-size-large : 18px
而CSS變量的語法如下
【聲明變量】
變量必須以--開頭。例如--example-variable: 20px，意思是將20px賦值給--example-varibale變量
可以將聲明變量的語句置于任何元素內(nèi)，如果要設(shè)置全局變量，則可以設(shè)置為:root、body或html
:root{--bgColor:#000;}變量聲明就像普通的樣式聲明語句一樣，也可以使用內(nèi)聯(lián)樣式
<body style="--bgColor:#000">
【使用變量】
使用var()函數(shù)使用變量，并且可以被使用在任意的地方。例如：var(--example-variable)會(huì)返回--example-variable所對應(yīng)的值
<body style="--bgColor:#000;"> <div style="width: 100px;height: 100px;background-color: var(--bgColor)"></div> </body>
var()函數(shù)還有一個(gè)可選參數(shù)，用來設(shè)置默認(rèn)值，當(dāng)變量無法取得值時(shí)，則使用默認(rèn)值
<div style="width: 100px;height: 100px;background-color: var(--bgColor,pink)"></div>
[注意]關(guān)于CSS變量的詳細(xì)用法移步至此
@apply
介紹@apply之前，先介紹一下sass中的混合宏@mixin，指可以重用的代碼塊
比如，常見的文字溢出隱藏重用
@mixin overflow-ellipsis{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; };div { @include overflow-ellipsis;} 而應(yīng)用規(guī)則集@apply也是實(shí)現(xiàn)類似的功能。與var()相比，@apply是引用樣式的集合，而var()是引用一個(gè)單獨(dú)的樣式值
:root{ --overflow-ellipsis:{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; };}.title{ width:200px; @apply --overflow-ellipsis;}自定義選擇器
自定義選擇器通過@custom-selector來定義，后面跟隨一個(gè):--接著是自定義選擇器的名稱，后面是需要定義的選擇器，多個(gè)用逗號隔開
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
這樣，:--heading就成為一個(gè)可以使用的選擇器
:--heading{ margin: 0;}h1, h2, h3, h4, h5, h6｛ margin: 0; ｝上面兩段代碼的效果相同
選擇器嵌套
CSS規(guī)則包含許多重復(fù)的內(nèi)容
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; }}當(dāng)使用嵌套樣式規(guī)則時(shí)，必須能夠引用由父規(guī)則匹配的元素; 畢竟是整個(gè)嵌套點(diǎn)。為了達(dá)到這個(gè)目的，這個(gè)規(guī)范定義了一個(gè)新的選擇器，即嵌套選擇器，寫成ASCII符號＆
當(dāng)在嵌套樣式規(guī)則的選擇器中使用時(shí)，嵌套選擇器表示由父規(guī)則匹配的元素。在任何其他情況下使用時(shí)，它什么都不代表。（也就是說，它是有效的，但不匹配任何元素）
[注意]&嵌套選擇符的兩種錯(cuò)誤寫法如下所示
.foo { color: red; .bar & { color:blue; }}.foo { color: red; &.bar, .baz { color: blue; }}【@nest】
為了解決上面的嵌套選擇符&的脆弱，可以使用@nest選擇符，@nest可適用范圍更廣，只要與嵌套選擇符&共同作用即可
.foo { color: red; @nest & > .bar { color: blue; }}//等價(jià)于 .foo { color: red; } .foo > .bar { color: blue; }.foo { color: red; @nest .parent & { color: blue; }}//等價(jià)于 .foo { color: red; } .parent .foo { color: blue; }.foo { color: red; @nest :not(&) { color: blue; }}//等價(jià)于 .foo { color: red; } :not(.foo) { color: blue; } [注意]@nest選擇符的兩種錯(cuò)誤寫法如下所示.foo { color: red; @nest .bar { color: blue; }}.foo { color: red; @nest & .bar, .baz { color: blue; }}最后
遺憾地是，除了CSS變量variable可以在新版本chrome下使用外，其他CSS選擇器的新用法目前都沒有瀏覽器支持。但是，CSS后處理器postcss中的cssnext插件可以解決所有問題
就像cssnext官網(wǎng)說的一樣，今天就開始使用明天的CSS語法
總結(jié)
以上所述是小編給大家介紹的CSS選擇器的新用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
