CSS3中的關係和屬性選擇器

以下摘錄自 Alexis Goldstein、Louis Lazaris 和 Estelle Weyl 合著的書籍《HTML5 & CSS3 for the Real World, 2nd Edition》。本書在全球各地的商店有售，您也可以在此處購買電子書版本。

核心要點

• CSS3 選擇器允許對網頁上的元素進行精確定位，擴展了先前 CSS 版本的功能。關係選擇器和屬性選擇器是 CSS3 的關鍵特性。
• 關係選擇器根據元素在標記中的相互關係來定位元素。這些包括後代組合器 (E F)、子組合器 (E > F)、相鄰兄弟選擇器或下一個兄弟選擇器 (E F) 和通用兄弟選擇器或後續兄弟選擇器 (E ~ F)。
• CSS3 中的屬性選擇器允許根據元素的屬性進行匹配，CSS3 通過允許模式匹配來擴展 CSS2 的屬性選擇器。這些包括E[attr]、E[attr=val]、E[attr|=val]、E[attr~=val]、E[attr^=val]、E[attr$=val] 和E[attr* =val]。
• 所有現代瀏覽器都支持 CSS3 選擇器，包括 IE9 及更高版本。使用這些選擇器可以大大提高網頁設計和開發的效率和有效性。

CSS3 選擇器

CSS 選擇器是 CSS 的核心。如果沒有選擇器來定位頁面上的元素，修改元素 CSS 屬性的唯一方法是使用元素的 style 屬性並內聯聲明樣式，這既笨拙又難以維護。因此我們使用選擇器。最初，CSS 允許按類型、類和/或 ID 匹配元素。這需要向我們的標記中添加類和 ID 屬性來創建掛鉤，並區分相同類型的元素。 CSS2.1 添加了偽元素、偽類和組合器。使用 CSS3，我們可以使用各種選擇器來定位頁面上的幾乎任何元素。

在下面的描述中，我們將包含早期 CSS 版本中提供給我們的選擇器。之所以包含它們，是因為雖然我們可以使用 CSS3 選擇器，但早於 CSS3 的選擇器也是 CSS 選擇器級別 3 規範的一部分，並且仍然受支持，因為 CSS 選擇器級別 3 擴展了它們。即使對於那些已經存在相當一段時間的選擇器，也值得在這裡回顧一下，因為舊規範中有一些鮮為人知的隱藏的寶石。請注意，所有現代瀏覽器（包括 IE9 及更高版本）都支持所有 CSS3 選擇器。

關係選擇器

關係選擇器根據元素在標記中的相互關係來定位元素。所有這些都從 IE7 開始支持，並且在所有其他主要瀏覽器中都支持：

後代組合器 (E F)

您一定應該熟悉這個。後代選擇器定位任何作為元素 E 的後代（子元素、孫元素、曾孫元素等）的元素 F。例如，ol li 定位位於有序列表內的 li 元素。這將包括嵌套在 ol 中的 ul 中的 li 元素，這可能不是您想要的。

子組合器 (E > F)

此選擇器匹配任何作為元素 E 的直接子元素的元素 F——任何進一步嵌套的元素都將被忽略。繼續上面的例子，ol > li 只會定位直接位於 ol 內的 li 元素，並將忽略嵌套在 ul 內的那些元素。

相鄰兄弟選擇器或下一個兄弟選擇器 (E F)

這將匹配任何與 E 共享相同父元素的元素 F，並且在標記中直接位於 E 之後。例如，li li 將定位給定容器中的所有 li 元素，除了第一個 li 元素。

通用兄弟選擇器或後續兄弟選擇器 (E ~ F)

這個有點棘手。它將匹配任何與任何 E 共享相同父元素並在標記中位於其之後的元素 F。因此，h1 ~ h2 將匹配任何位於 h1 之後的 h2，只要它們都共享相同的直接父元素——也就是說，只要 h2 沒有嵌套在任何其他元素中。

讓我們來看一個簡單的例子：

<header>
  <h1 id="Main-title">Main title</h1>
  <h2 id="This-subtitle-is-matched">This subtitle is matched</h2>
</header>
<article>
  <p>blah, blah, blah …</p>
  <h2 id="This-is-not-matched-by-h-h-but-is-by-header-h">This is not matched by h1 ~ h2, but is by header ~ h2</h2>
  <p>blah, blah, blah …</p>
</article>

選擇器字符串 h1 ~ h2 將匹配第一個 h2，因為 h1 和 h2 都是 header 的子元素或直接後代。您將在代碼片段中看到的下一個 h2 不匹配，因為它的父元素是 article，而不是 header。但是，它將匹配 header ~ h2。類似地，h2 ~ p 只匹配最後一個段落，因為第一個段落位於它與父元素 article 共享的 h2 之前。

注意：為什麼沒有“父”選擇器？

您會注意到，到目前為止，還沒有“父”或“祖先”選擇器，也沒有“前置兄弟”選擇器。瀏覽器必須向後遍歷 DOM 樹或在決定是否應用樣式之前遞歸到嵌套元素集的性能，阻止了擁有原生“向上遍歷 DOM 樹”選擇器的能力。

jQuery 包含 :has() 作為祖先選擇器。此選擇器正在考慮用於 CSS 選擇器級別 4，但尚未在任何瀏覽器中實現。如果並當它被實現時，我們將能夠使用E:has(F) 來查找具有F 作為後代的E，E:has(> F) 來查找具有F 作為直接子元素的E，E:has( F ) 來查找直接位於兄弟F 之前的E，以及類似的。

瀏覽《The HTML5 Herald》的樣式表，您會看到我們在許多地方使用了這些選擇器。例如，在確定站點的整體佈局時，我們希望三個列的 div 向左浮動。為了避免將此樣式應用於嵌套在其內部的任何其他 div，我們使用子選擇器：

main > div {
  float: left;
  overflow: hidden;
}

隨著我們在接下來的幾章中向站點添加新樣式，您將看到許多此類選擇器類型。

屬性選擇器

CSS2 引入了幾個屬性選擇器。這些允許根據元素的屬性進行匹配。 CSS3 擴展了這些屬性選擇器，允許基於模式匹配進行一些定位。 CSS 選擇器級別 4 添加了一些更多內容：

E[attr] 匹配任何具有屬性 attr 的元素 E，而不管屬性的值如何。我們在第 4 章中使用了它來設置必需輸入的樣式；input:required 在最新的瀏覽器中有效，但 input[required] 也具有相同的效果，並且在 IE7 和 IE8 中也有效。

E[attr=val] 匹配任何具有屬性 attr 且其值為 val 的元素 E。雖然不是新的，但在定位表單輸入類型時它很有用；例如，使用 input[type=checkbox] 定位複選框。

E[attr|=val] 匹配任何其屬性 attr 的值為 val 或以 val- 開頭的元素 E。這最常用於 lang 屬性。例如，p[lang|="en"] 將匹配任何被定義為英語的段落，無論是英國英語還是美國英語，使用

或

。

E[attr~=val] 匹配任何其屬性 attr 的值中包含完整單詞 val（由空格包圍）的元素 E。例如，.info[title~=more] 將匹配任何具有類 info 且標題屬性包含單詞“more”的元素，例如“單擊此處了解更多信息”。

E[attr^=val] 匹配任何其屬性 attr 以值 val 開頭的元素 E。換句話說，val 與屬性值的開頭匹配。

E[attr$=val] 匹配任何其屬性 attr 以 val 結尾的元素 E。換句話說，val 與屬性值的結尾匹配。

E[attr=val] 匹配任何其屬性 attr 在任何位置與 val 匹配的元素 E。它類似於 E[attr~=val]，只是 val 可以是單詞的一部分。使用與之前相同的示例，.fakelink[title=info] {} 將匹配任何具有類 fakelink 且標題屬性包含字符串 info 的元素，例如“單擊此處了解更多信息”。

在這些屬性選擇器中，對於 HTML 中區分大小寫的 value，val 的值區分大小寫。例如，input[class^="btn"] 區分大小寫，因為類名區分大小寫，但 input[type="checkbox"] 不區分大小寫，因為 type 值在 HTML 中不區分大小寫。

如果值是字母數字的，則不必引用值，但有一些例外。空字符串、以數字開頭的字符串、兩個連字符和其他一些特殊情況需要用引號括起來。由於存在例外情況，因此養成始終為需要引號的情況包含引號的習慣是一個好主意。

在 CSS 選擇器級別 4 中，我們可以通過在結束括號之前包含一個 i 來實現不區分大小寫，E[attr*=val i]。

CSS3 中關係選擇器和屬性選擇器的常見問題

CSS3 中關係選擇器和屬性選擇器有什麼區別？

CSS3 中的關係選擇器用於根據元素與 HTML 文檔中其他元素的關係來選擇元素。例如，子元素、後代、相鄰兄弟和通用兄弟選擇器都是關係選擇器的類型。另一方面，屬性選擇器用於根據元素的屬性或屬性值來選擇元素。例如，您可以使用屬性選擇器選擇所有類型屬性為“text”的輸入元素。

如何在 CSS3 中使用子組合器？

CSS3 中的子組合器由“>”符號表示。它用於選擇特定元素的直接子元素。例如，如果您想選擇具有類“parent”的父元素的所有直接子 div 元素，則應編寫如下 CSS：

.parent > div { /* CSS 属性在此处 */ }

我可以在 CSS3 中使用多個屬性選擇器嗎？

是的，您可以在 CSS3 中使用多個屬性選擇器。這允許您選擇滿足多個屬性條件的元素。例如，如果您想選擇所有類型屬性為“text”且名稱屬性為“username”的輸入元素，則應編寫如下 CSS：

input[type="text"][name="username"] { /* CSS 属性在此处 */ }

CSS3 中相鄰兄弟組合器的用途是什麼？

CSS3 中的相鄰兄弟組合器由“ ”符號表示。它用於選擇直接位於另一個特定元素之後的元素，並且這兩個元素共享相同的父元素。例如，如果您想選擇直接位於 p 元素之後的 div 元素，則應編寫如下 CSS：

p div { /* CSS 属性在此处 */ }

如何在 CSS3 中選擇具有特定屬性值的元素？

要在 CSS3 中選擇具有特定屬性值的元素，請使用帶方括號的屬性選擇器、屬性名稱和值。例如，如果您想選擇所有類型屬性為“text”的輸入元素，則應編寫如下 CSS：

input[type="text"] { /* CSS 属性在此处 */ }

我可以在 CSS3 中組合關係選擇器和屬性選擇器嗎？

是的，您可以在 CSS3 中組合關係選擇器和屬性選擇器。這允許您根據元素與其他元素的關係及其屬性來選擇元素。例如，如果您想選擇具有類“form”的表單元素的所有直接子輸入元素，其中輸入元素的類型屬性為“text”，則應編寫如下 CSS：

form.form > input[type="text"] { /* CSS 属性在此处 */ }

CSS3 中的通用兄弟組合器是什麼？

CSS3 中的通用兄弟組合器由“~”符號表示。它用於選擇特定元素的兄弟元素，而不管它們在 HTML 文檔中的順序如何。例如，如果您想選擇 p 元素的所有兄弟 div 元素，則應編寫如下 CSS：

p ~ div { /* CSS 属性在此处 */ }

如何在 CSS3 中選擇不具有特定屬性的元素？

要在 CSS3 中選擇不具有特定屬性的元素，請使用帶有屬性選擇器的 :not() 偽類。例如，如果您想選擇所有類型屬性不為“submit”的輸入元素，則應編寫如下 CSS：

input:not([type="submit"]) { /* CSS 属性在此处 */ }

我可以在 CSS3 中將關係選擇器與偽類結合使用嗎？

是的，您可以在 CSS3 中將關係選擇器與偽類結合使用。這允許您根據元素與其他元素的關係及其狀態來選擇元素。例如，如果您想選擇導航元素的所有直接子 a 元素，這些元素正在被懸停，則應編寫如下 CSS：

nav > a:hover { /* CSS 属性在此处 */ }

如何在 CSS3 中選擇包含特定值的特定屬性的元素？

要在 CSS3 中選擇包含特定值的特定屬性的元素，請使用帶方括號的屬性選擇器、屬性名稱和值以及 *= 運算符。例如，如果您想選擇所有 href 屬性包含“example”的 a 元素，則應編寫如下 CSS：

a[href*="example"] { /* CSS 属性在此处 */ }

以上是CSS3中的關係和屬性選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！