css 選擇器類型:基本選擇器:根據(jù)元素名稱選擇,包括元素選擇器、類選擇器和 id 選擇器。修飾符選擇器:細化基本選擇器范圍,包括后代選擇器、子選擇器、相鄰選擇器和偽類選擇器。屬性選擇器:根據(jù)元素屬性值選擇,包括屬性存在選擇器、屬性值選擇器和部分匹配屬性值選擇器。組合選擇器:將多個選擇器組合使用,包括逗號分隔的選擇器和群組選擇器。
CSS 選擇器類型
CSS 選擇器用于指定 HTML 元素或元素組,以便向它們應(yīng)用樣式。有四種主要類型的 CSS 選擇器:
1. 基本選擇器
基本選擇器按名稱選擇元素,包括:
元素選擇器:選擇具有特定 HTML 標簽的元素,如 <p></p>
、<h1></h1>
類選擇器:選擇具有特定類屬性的元素,如 .primary
、.container
ID 選擇器:選擇具有特定 ID 屬性的元素,如 #main
、#contact
2. 修飾符選擇器
修飾符選擇器用于細化基本選擇器的選擇范圍,包括:
后代選擇器(空白):選擇屬于父元素后代的元素,如 div p
子選擇器(>):選擇直接屬于父元素的元素,如 div > p
相鄰選擇器(+):選擇緊鄰前一個元素的元素,如 p + h1
偽類選擇器(:hover, :active):選擇處于特定狀態(tài)的元素,如鼠標懸停時(:hover
),或激活時(:active
)
3. 屬性選擇器
屬性選擇器按元素的屬性值選擇元素,包括:
屬性存在選擇器([屬性]):選擇帶有特定屬性的元素,如 [type]
屬性值選擇器([屬性=”值”]):選擇具有特定屬性值的元素,如 [type="text"]
部分匹配屬性值選擇器([屬性~=”值”]):選擇其屬性值包含指定子字符串的元素,如 [type~="text"]
4. 組合選擇器
組合選擇器允許將多個選擇器組合在一起,例如:
逗號分隔的選擇器:選擇滿足多個選擇器條件的元素,如 p, h1
群組選擇器(括號):將多個選擇器分組,并應(yīng)用同一組樣式,如 (p, h1) { ... }