屬性選擇器

正如您在學習 HTML 時所知，元素可以具有屬性，這些屬性提供了有關標記元素的更多詳細資訊。在 CSS 中，您可以使用屬性選擇器來定位具有特定屬性的元素。本課將向您展示如何使用這些非常有用的選擇器。

先決條件	安裝基本軟體，基本瞭解檔案操作，HTML 基礎知識（學習HTML 簡介），以及 CSS 的工作原理（學習CSS 入門）。
目標	學習什麼是屬性選擇器以及如何使用它們。

存在和值選擇器

這些選擇器可以根據屬性的存在（例如 href）或對屬性值的各種不同匹配來選擇元素。

選擇器	示例	描述
`[attr]`	`a[title]`	匹配具有 attr 屬性（其名稱為方括號中的值）的元素。
`[attr=value]`	`a[href="https://example.com"]`	匹配具有 attr 屬性且其值為 value（引號內的字串）的元素。
`[attr~=value]`	`p[class~="special"]`	匹配具有 attr 屬性且其值為 value 或其（空格分隔）值列表中包含 value 的元素。
`[attr\|=value]`	`div[lang\|="zh"]`	匹配具有 attr 屬性且其值為 value 或以 value 開頭，緊跟著連字元的元素。

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

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

這些選擇器允許更高階地匹配屬性值中的子字串。例如，如果您有 box-warning 和 box-error 的類，並且想要匹配所有以字串“box-”開頭的類，您可以使用 [class^="box-"] 來選擇兩者（或 [class|="box"]，如上面的部分所述）。

選擇器	示例	描述
`[attr^=value]`	`li[class^="box-"]`	匹配具有 attr 屬性且其值以 value 開頭的元素。
`[attr$=value]`	`li[class$="-box"]`	匹配具有 attr 屬性且其值以 value 結尾的元素。
`[attr*=value]`	`li[class*="box"]`	匹配具有 attr 屬性且其值包含 value 的元素（在字串中的任何位置）。

（旁白：需要注意的是，^ 和 $ 長期以來一直用作所謂的正則表示式中的錨點，分別表示以...開頭和以...結尾）。

以下示例顯示了這些選擇器的用法

如果您想匹配不區分大小寫的屬性值，您可以在結束括號之前使用值 i。此標誌告訴瀏覽器不區分大小寫地匹配ASCII 字元。如果沒有此標誌，值將根據文件語言的大小寫敏感性進行匹配 — 在 HTML 的情況下，它將區分大小寫。

在下面的示例中，第一個選擇器將匹配以 a 開頭的值 — 它只匹配第一個列表項，因為其他兩個列表項以大寫的 A 開頭。第二個選擇器使用不區分大小寫的標誌，因此匹配所有列表項。

注意： 還存在一個較新的值 s，它將在匹配通常不區分大小寫的上下文中強制區分大小寫的匹配，但它在瀏覽器中的支援程度較低，在 HTML 上下文中也不是很有用。

現在我們已經完成了屬性選擇器，您可以繼續下一篇文章，閱讀有關偽類和偽元素選擇器的內容。