css選擇器規則

05-24

css選擇器規則

來自專欄前端知識筆記

1. 選擇器分類

簡單選擇器（Simple selectors）：通過元素類型、class 或 id 匹配一個或多個元素。

屬性選擇器（Attribute selectors）：通過屬性 / 屬性值匹配一個或多個元素。

偽類（Pseudo-classes）：匹配處於確定狀態的一個或多個元素，比如被滑鼠指針懸停的元素，或當前被選中或未選中的複選框，或元素是DOM樹中一父節點的第一個子節點。

偽元素（Pseudo-elements）:匹配處於相關的確定位置的一個或多個元素，例如每個段落的第一個字，或者某個元素之前生成的內容。

組合器（Combinators）：這裡不僅僅是選擇器本身，還有以有效的方式組合兩個或更多的選擇器用於非常特定的選擇的方法。例如，你可以只選擇divs的直系子節點的段落，或者直接跟在headings後面的段落。

多用選擇器（Multiple selectors）：這些也不是單獨的選擇器；這個思路是將以逗號分隔開的多個選擇器放在一個CSS規則下面，以將一組聲明應用於由這些選擇器選擇的所有元素。

2. 簡單選擇器

類型選擇器（又名元素選擇器）: 選擇器名和指定的HTML元素名的不區分大小寫的匹配。

元素名 {屬性名:屬性值;}

類選擇器: 由一個點「.」以及類後面的類名組成。

.類名 {屬性名:屬性值;}

ID 選擇器: 由哈希/磅符號 (#)組成，後面是給定元素的ID名稱( ID 名稱具有唯一性)。

#ID名 {屬性名:屬性值;}

通用選擇器: （*）星號，表示選擇頁面所有元素。

* {屬性名:屬性值;}

3. 屬性選擇器

屬性選擇器是一種特殊類型的選擇器，它根據元素的屬性和屬性值來匹配元素。

通用語法: [屬性名:屬性值]

分類: 存在和值屬性選擇器和子串值屬性選擇器。

3.1 存在和值（Presence and value）屬性選擇器

這些屬性選擇器嘗試匹配精確的屬性值：

[attr]：該選擇器選擇包含 attr 屬性的所有元素，不論 attr 的值為何。[attr=val]：該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。[attr~=val]：該選擇器僅選擇 attr 屬性的值（以空格間隔出多個值）中有包含 val 值的所有元素，比如位於被空格分隔的多個類（class）中的一個類。

3.2 子串值（Substring value）屬性選擇器

這種情況的屬性選擇器也被稱為「偽正則選擇器」，因為它們提供類似 regular expression 的靈活匹配方式（但請注意，這些選擇器並不是真正的正則表達式）：

[attr|=val] : 選擇attr屬性的值是 val 或值以 val- 開頭的元素（-用來處理語言編碼）。[attr^=val] : 選擇attr屬性的值以val開頭（包括 val）的元素。[attr$=val] : 選擇attr屬性的值以val結尾（包括 val）的元素。[attr*=val] : 選擇attr屬性的值中包含字元串 val 的元素。