css選擇器有哪幾種型別

ytsee發表於2024-04-07
CSS型別

CSS 選擇器型別

CSS 選擇器用於指定 HTML 元素或元素組，以便向它們應用樣式。有四種主要型別的 CSS 選擇器：

1. 基本選擇器

基本選擇器按名稱選擇元素，包括：

  • 元素選擇器：選擇具有特定 HTML 標籤的元素，如 <p></p>、<h1></h1>
  • 類選擇器：選擇具有特定類屬性的元素，如 .primary、.container
  • ID 選擇器：選擇具有特定 ID 屬性的元素，如 #main、#contact

2. 修飾符選擇器

修飾符選擇器用於細化基本選擇器的選擇範圍，包括：

  • 後代選擇器（空白）：選擇屬於父元素後代的元素，如 div p
  • 子選擇器（>）：選擇直接屬於父元素的元素，如 div &gt; p
  • 相鄰選擇器（+）：選擇緊鄰前一個元素的元素，如 p + h1
  • 偽類選擇器（:hover, :active）：選擇處於特定狀態的元素，如滑鼠懸停時（:hover），或啟用時（:active）

3. 屬性選擇器

屬性選擇器按元素的屬性值選擇元素，包括：

  • 屬性存在選擇器（[屬性]）：選擇帶有特定屬性的元素，如 [type]
  • 屬性值選擇器（[屬性="值"]）：選擇具有特定屬性值的元素，如 [type="text"]
  • 部分匹配屬性值選擇器（[屬性~="值"]）：選擇其屬性值包含指定子字串的元素，如 [type~="text"]

4. 組合選擇器

組合選擇器允許將多個選擇器組合在一起，例如：

  • 逗號分隔的選擇器：選擇滿足多個選擇器條件的元素，如 p, h1
  • 群組選擇器（括號）：將多個選擇器分組，並應用同一組樣式，如 (p, h1) { ... }

以上就是css選擇器有哪幾種型別的詳細內容

相關文章