CSS選擇器的新用法
前面的話
現在,預處理器(如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>
[註意]關於CSS變量的詳細用法移步至此
@apply
介紹@apply之前,先介紹一下sass中的混合宏@mixin,指可以重用的代碼塊
比如,常見的文字溢出隱藏重用
@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; } }
最後
遺憾地是,除了CSS變量variable可以在新版本chrome下使用外,其他CSS選擇器的新用法目前都沒有瀏覽器支持。但是,CSS後處理器postcss中的cssnext插件可以解決所有問題
就像cssnext官網說的一樣,今天就開始使用明天的CSS語法
CSS選擇器的新用法