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

核心要點(diǎn)

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

CSS3 選擇器

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

在下面的描述中，我們將包含早期 CSS 版本中提供給我們的選擇器。之所以包含它們，是因?yàn)殡m然我們可以使用 CSS3 選擇器，但早於 CSS3 的選擇器也是 CSS 選擇器級(jí)別 3 規(guī)範(fàn)的一部分，並且仍然受支持，因?yàn)?CSS 選擇器級(jí)別 3 擴(kuò)展了它們。即使對(duì)於那些已經(jīng)存在相當(dāng)一段時(shí)間的選擇器，也值得在這裡回顧一下，因?yàn)榕f規(guī)範(fàn)中有一些鮮為人知的隱藏的寶石。請(qǐng)注意，所有現(xiàn)代瀏覽器（包括 IE9 及更高版本）都支持所有 CSS3 選擇器。

關(guān)係選擇器

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

後代組合器 (E F)

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

子組合器 (E > F)

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

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

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

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

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

讓我們來看一個(gè)簡(jiǎn)單的例子：

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

選擇器字符串 h1 ~ h2 將匹配第一個(gè) h2，因?yàn)?h1 和 h2 都是 header 的子元素或直接後代。您將在代碼片段中看到的下一個(gè) h2 不匹配，因?yàn)樗母冈厥?article，而不是 header。但是，它將匹配 header ~ h2。類似地，h2 ~ p 只匹配最後一個(gè)段落，因?yàn)榈谝粋€(gè)段落位於它與父元素 article 共享的 h2 之前。

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

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

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

瀏覽《The HTML5 Herald》的樣式表，您會(huì)看到我們?cè)谠S多地方使用了這些選擇器。例如，在確定站點(diǎn)的整體佈局時(shí)，我們希望三個(gè)列的 div 向左浮動(dòng)。為了避免將此樣式應(yīng)用於嵌套在其內(nèi)部的任何其他 div，我們使用子選擇器：

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

隨著我們?cè)诮酉聛淼膸渍轮邢蛘军c(diǎn)添加新樣式，您將看到許多此類選擇器類型。

屬性選擇器

CSS2 引入了幾個(gè)屬性選擇器。這些允許根據(jù)元素的屬性進(jìn)行匹配。 CSS3 擴(kuò)展了這些屬性選擇器，允許基於模式匹配進(jìn)行一些定位。 CSS 選擇器級(jí)別 4 添加了一些更多內(nèi)容：

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

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

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

或

。

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

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

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

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

在這些屬性選擇器中，對(duì)於 HTML 中區(qū)分大小寫的 value，val 的值區(qū)分大小寫。例如，input[class^="btn"] 區(qū)分大小寫，因?yàn)轭惷麉^(qū)分大小寫，但 input[type="checkbox"] 不區(qū)分大小寫，因?yàn)?type 值在 HTML 中不區(qū)分大小寫。

如果值是字母數(shù)字的，則不必引用值，但有一些例外?？兆址?、以數(shù)字開頭的字符串、兩個(gè)連字符和其他一些特殊情況需要用引號(hào)括起來。由於存在例外情況，因此養(yǎng)成始終為需要引號(hào)的情況包含引號(hào)的習(xí)慣是一個(gè)好主意。

在 CSS 選擇器級(jí)別 4 中，我們可以通過在結(jié)束括號(hào)之前包含一個(gè) i 來實(shí)現(xiàn)不區(qū)分大小寫，E[attr*=val i]。

CSS3 中關(guān)係選擇器和屬性選擇器的常見問題

CSS3 中關(guān)係選擇器和屬性選擇器有什麼區(qū)別？

CSS3 中的關(guān)係選擇器用於根據(jù)元素與 HTML 文檔中其他元素的關(guān)係來選擇元素。例如，子元素、後代、相鄰兄弟和通用兄弟選擇器都是關(guān)係選擇器的類型。另一方面，屬性選擇器用於根據(jù)元素的屬性或?qū)傩灾祦磉x擇元素。例如，您可以使用屬性選擇器選擇所有類型屬性為“text”的輸入元素。

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

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

.parent > div { /* CSS 屬性在此處 */ }

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

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

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

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

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

p div { /* CSS 屬性在此處 */ }

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

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

input[type="text"] { /* CSS 屬性在此處 */ }

我可以在 CSS3 中組合關(guān)係選擇器和屬性選擇器嗎？

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

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

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

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

p ~ div { /* CSS 屬性在此處 */ }

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

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

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

我可以在 CSS3 中將關(guān)係選擇器與偽類結(jié)合使用嗎？

是的，您可以在 CSS3 中將關(guān)係選擇器與偽類結(jié)合使用。這允許您根據(jù)元素與其他元素的關(guān)係及其狀態(tài)來選擇元素。例如，如果您想選擇導(dǎo)航元素的所有直接子 a 元素，這些元素正在被懸停，則應(yīng)編寫如下 CSS：

nav > a:hover { /* CSS 屬性在此處 */ }

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

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

a[href*="example"] { /* CSS 屬性在此處 */ }

以上是CSS3中的關(guān)係和屬性選擇器的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！