養分篇中提到了CSS選擇器包含:通用選擇器
標籤(元素)選擇器
類別選擇器
ID選擇器
;偽裝(上)篇介紹虛擬類別中的狀態選擇器
(特殊狀態下才被套用),接下來介紹其他實用的選擇器。
就如同名稱所示,透過元素上的屬性來選擇:
span[class]{}
/* 選擇有class屬性的span */
span[class="sr-only"]{}
/* 選擇有class屬性且值只有sr-only的span */
span[class~="sr-only"]{}
/* 選擇有class屬性且其中一個值為sr-only的span */
span[class|="sr"]{}
/* 選擇有class屬性且值為sr或是sr-為前綴的span */
span[class^="sr-only"]{}
/* 選擇有class屬性且值為sr-only開頭的span */
span[class$="sr-only"]{}
/* 選擇有class屬性且值為sr-only結尾的span */
:root
根元素,以HTML檔案來說,根元素就是<html>
標籤。
:not()
否定偽類,代表除了()內的目標之外其餘的元素,例如:
div:not(.total){}
/* class中沒有total的div */
:nth-child(n)
這個元素下的子元素中,依先後排序(從1開始數),第n個子元素。(計算所有類型的元素)
另外還有::nth-last-child(n)
則是從最後面開始數來第n個。:first-child
選第一個子元素。:last-child
選最後一個子元素。
:nth-of-type(n)
這個元素的所有兄弟元素依先後排序(從1開始數),第n個兄弟元素。(只計算指定的元素)
另外還有::nth-last-of-type(n)
則是從最後面開始數來第n個。:first-of-type
選第一個兄弟元素。:last-of-type
選最後一個兄弟元素。
CSS選擇器提供相當多種的方式,來準確的選擇到想要的目標元素,熟悉之後就可以寫出更為簡潔的樣式表出來,接下來就完成資產負債表
的任務吧。