屬性選擇器

存在和值選擇器

這些選擇器使你可以僅根據屬性的存在（例如 href），或根據與屬性值進行的各種不同匹配來選擇元素。

在下面的示例中，你可以看到這些選擇器的使用。

• 透過使用 li[class]，我們可以匹配任何帶有 class 屬性的列表項。這會匹配除第一個之外的所有列表項。
• li[class="a"] 匹配 class 為 a 的選擇器，但不匹配 class 為 a 且其值中還包含其他以空格分隔的 class 的選擇器。它選擇了第二個列表項。
• li[class~="a"] 會匹配 class 為 a 的項，也匹配值中包含 a 作為空格分隔列表一部分的項。它選擇了第二個和第三個列表項。

<h1>Attribute presence and value selectors</h1>
<ul>
  <li>Item 1</li>
  <li class="a">Item 2</li>
  <li class="a b">Item 3</li>
  <li class="ab">Item 4</li>
</ul>

body {
  font-family: sans-serif;
}
li[class] {
  font-size: 120%;
}

li[class="a"] {
  background-color: yellow;
}

li[class~="a"] {
  color: red;
}

嘗試編輯上面的 CSS，新增一個規則，僅選擇 class 屬性值為 ab 的列表項，併為它們設定 white 文字 color 和 purple background-color。

子字串匹配選擇器

這些選擇器允許對屬性值中的子字串進行更高階的匹配。例如，如果你有 class box-warning 和 box-error，並且想要匹配所有以字串 "box-" 開頭的項，你可以使用 [class^="box-"] 來同時選擇它們（或者如上面章節所述使用 [class|="box"]）。

下一個示例展示了這些選擇器的用法

• li[class^="a"] 匹配任何以 a 開頭的屬性值，因此匹配前兩個列表項。
• li[class$="a"] 匹配任何以 a 結尾的屬性值，因此匹配第一個和第三個列表項。
• li[class*="a"] 匹配 a 出現在字串中任何位置的屬性值，因此它匹配我們所有的列表項。

<h1>Attribute substring matching selectors</h1>
<ul>
  <li class="a">Item 1</li>
  <li class="ab">Item 2</li>
  <li class="bca">Item 3</li>
  <li class="bcabc">Item 4</li>
</ul>

body {
  font-family: sans-serif;
}
li[class^="a"] {
  font-size: 120%;
}

li[class$="a"] {
  background-color: yellow;
}

li[class*="a"] {
  color: red;
}

嘗試編輯上面的 CSS，新增一個規則，僅選擇 class 屬性值以 b 或 c 結尾的列表項，併為它們設定 2px 寬、solid、black 的 border。你可能需要使用 選擇器列表 來解決這個問題。

總結

現在我們已經完成了屬性選擇器，你可以繼續閱讀下一篇文章，瞭解偽類和偽元素選擇器。

• 上一頁
• 概述：CSS 樣式基礎
• 下一頁