CSS學習（二）選擇符

元素選擇符：以元素名作為選擇符（span{ color: red; }）

群組選擇符：将兩個選擇符用逗号隔開構成群組（span, div{ color: red; }）

通用選擇符：通用選擇符（*）将比對所有元素（*{ color: red; }）

類選擇符：根據類名比對元素（.類名{ color: red; }）

ID選擇符：根據ID值比對元素（#id{ color: red; }）

屬性選擇符

簡單屬性選擇符：根據是否有這個屬性比對元素（span[class]{ color: red; }）

精準屬性值選擇：比對屬性為特定值的元素（精準字元串比對）必須完全一緻(span[class="urgent warning"]{ color: red; })

根據部分屬性值選擇：以bar為例

屬性以bar和一個英文破折号開頭的，或者bar本身（span[class|="bar"]{ color: red; }）

其值是包含bar的一組詞（span[class~="bar"] { color: red; }）

其值是包含子串bar（span[class*="bar"] { color: red; }）

其值以bar開頭（span[class^="bar"] { color: red; }）

其值以bar結尾（span[class$="bar"] { color: red; }）

後代選擇符：選擇所有符合條件的後代（span div { color: red; }）

子代連接配接符：選擇符合條件的子代（span > div { color: red; }）

緊鄰同胞連接配接符：選擇同一個父元素中，緊跟在另一個元素後面的元素（span + div { color: red; }）

一般同胞連接配接符：選擇一個元素後面同屬一個父元素的另一個元素(如例子：所有在span後面的div的color都是red) （ span~div { color: red; }）

僞類選擇符（僞類的效果是把某種幽靈類應用到僞類依附的元素上）：

結構僞類

選擇根元素（:root）：在html中文檔的根元素永遠都是html标簽，但是在xml中，根元素就千奇百怪了

選擇空元素（:empty）：可以使用empty僞類可以選擇沒有任何子代的元素，甚至連文本結點都沒有（包括文本和空白）注釋不算

選擇唯一子代（:only-child）：比對另一個元素的唯一子元素

選擇唯一某種子元素（:only-of-type）：比對同胞中唯一的那種元素

選擇第一個子代（:first-child）：比對一個元素的第一個子代

選擇最後一個子代（:last-child）：比對一個元素的最後一個子代

選擇第一個某種子元素（:first-of-type）：比對一個元素的第一個某種子元素

選擇最後一個某種子元素（:last-of-type）：比對一個元素的最後一個某種子元素

選擇第n個子代（:nth-child(an+b)）：比對第an+b個子代，a、b是常數，n為1、2、3......

選擇倒數第n個子代（:nth-last-child(an+b)）比對倒數第an+b個子代，a、b、n同上

選擇第n個某種子元素（:nth-of-type(an+b)）比對第an+b個某種子元素，a、b、n同上

選擇倒數第n個某種子元素（:nth-last-of-type(an+b)）比對倒數第an+b個某種子元素，a、b、n同上

動态僞類

超連結僞類

:link 比對具有herf屬性的錨點

:visited 比對已通路的錨點（鑒于隐私保護，僞類中隻有color屬性才能生效，其它的都無效）

使用者操作僞類

:focus 目前獲得輸入焦點的元素

:hover 滑鼠指針放置其上的元素

:active 由使用者輸入激活的元素

UI狀态僞類

:enabled 接受輸入的元素

:disabled 不接受輸入的元素

:checked 由使用者或文檔預設選中的單選框或多選框

:indeterminate 既未選中也沒有未選中的單選按鈕或多選按鈕

:default 預設選中的單選按鈕、複選框或選項

:valid 滿足有效性語義的輸入框

:invalid 不滿足有效性語義的輸入框

:in-range 輸入的值在最大值和最小值之間的輸入框

:out-of-range 輸入的值不在最小值到最大值之間的輸入框

:required 指代必須輸入值的輸入框

:optional 指代無須一定輸入值的輸入框

:read-write 可由使用者編輯的輸入框

:read-only 不能由使用者編輯的輸入框

:target僞類：給錨點（該錨點有id且網頁中有url(片段辨別符)指向此id）設定樣式

:lang僞類：根據文本使用的語言選擇元素

否定僞類（:not(要選擇的簡單選擇符)）：相當于程式設計中的非操作，不滿足要選擇的簡單選擇符的時候，應用樣式

tip：簡單選擇符：類型選擇符、通用選擇符、屬性選擇符、類選擇符、ID選擇符或僞類

僞元素選擇符

裝飾首字母（::first-letter）

裝飾首行（::first-line）

裝飾（或建立）前置和後置内容元素（::before ::after）