選擇器

如果您有某些文字,只想在該文字是文章第一段時顯示為較大且紅色,該如何操作?

<article>
  <p>I want to be red and larger than the other text.</p>
  <p>I want to be normal sized and the default color.</p>
</article>

您可以使用 CSS 選取器找出特定元素,然後套用 CSS 規則,如下所示。

article p:first-of-type {
  color: red;
  font-size: 1.5em;
}

CSS 提供許多選項,可讓您選取元素並套用規則,從簡單到複雜都有,有助於解決這類情況。

CSS 規則的組成部分

如要瞭解選取器的運作方式和在 CSS 中的角色,請務必瞭解 CSS 規則的各個部分。CSS 規則是一組程式碼,其中包含一或多個選取器和一或多個宣告。

圖片:CSS 規則,選取器為 .my-css-rule。

在這個 CSS 規則中,選取器.my-css-rule,可找出網頁上所有類別為 my-css-rule 的元素。大括號內有三個宣告。宣告是屬性和值的組合,可將樣式套用至選取器所比對的元素。CSS 規則可以包含任意數量的宣告和選取器。

簡單選取器

最簡單的選取器群組會鎖定 HTML 元素,以及可能會加入 HTML 標記的類別、ID 和其他屬性。

通用選取器

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

通用選取器 (也稱為萬用字元) 可與任何元素相符。

* {
  color: hotpink;
}

這項規則會讓網頁上的每個 HTML 元素都顯示粉紅色文字。

類型選取器

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

類型選取器會直接比對 HTML 元素。

section {
  padding: 2em;
}

這項規則會讓每個 <section> 元素的四周都設有 2empadding

類別選取器

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

HTML 元素可在 class 屬性中定義一或多個項目。類別選取器會比對任何已套用該類別的元素。

<div class="my-class"></div>
<button class="my-class"></button>
<p class="my-class"></p>

套用類別的任何元素都會以紅色標示:

.my-class {
  color: red;
}

請注意,. 只會出現在 CSS 中,不會出現在 HTML 中。這是因為 . 字元會指示 CSS 語言比對類別屬性成員。這是 CSS 中常見的模式,其中特殊字元或字元組合用於定義選取器類型。

即使 HTML 元素的類別為 .my-class,仍會與上述 CSS 規則相符,即使該元素有多個其他類別也是如此,例如:

<div class="my-class another-class some-other-class"></div>

這是因為 CSS 會尋找「包含」已定義類別的 class 屬性,而不是完全比對該類別。

ID 選取器

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

含有 id 屬性的 HTML 元素,應是該 ID 值在頁面上唯一的元素。您可以使用ID 選取器選取元素,如下所示:

#rad {
  border: 1px solid blue;
}

這段 CSS 會將藍色邊框套用至 radid HTML 元素,如下所示:

<div id="rad"></div>

與類別選取器 . 類似,請使用 # 字元指示 CSS 尋找與後方 id 相符的元素。

屬性選取器

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 3.

Source

您可以使用屬性選取器,尋找具有特定 HTML 屬性或特定 HTML 屬性值的元素。使用方括號 ([ ]) 將選取器包起來,指示 CSS 尋找屬性。

[data-type='primary'] {
  color: red;
}

這段 CSS 會尋找所有屬性為 data-type 且值為 primary 的元素,如下所示:

<div data-type="primary"></div>

您可以不尋找特定的 data-type 值,而是尋找具有該屬性的元素,不論其值為何。

[data-type] {
  color: red;
}
<div data-type="primary"></div>
<div data-type="secondary"></div>

這兩個 <div> 元素都會顯示紅色文字。

如要使用區分大小寫的屬性選取器,請在屬性選取器中加入 s 運算子。

[data-type='primary' s] {
  color: red;
}

也就是說,如果 HTML 元素的 data-typePrimary (而非 primary),就不會顯示紅色文字。您可以使用 i 運算子執行相反的操作,也就是不區分大小寫。

除了大小寫運算子之外,您還可以使用運算子,比對屬性值內的字串部分。

/* A href that contains "example.com" */
[href*='example.com'] {
  color: red;
}

/* A href that starts with https */
[href^='https'] {
  color: green;
}

/* A href that ends with .com */
[href$='.com'] {
  color: blue;
}
在這個示範中,屬性選取器中的 `$` 運算子會從 `href` 屬性取得檔案類型。這樣一來,您就可以使用偽元素,根據檔案類型為標籤加上前置字串。

分組選取器

選取器不必只比對單一元素。您可以使用逗號將多個選取器分組:

strong,
em,
.my-class,
[lang] {
  color: red;
}

這個範例會將顏色變更擴展至 <strong> 元素和 <em> 元素。它也擴充至名為 .my-class 的類別,以及具有 lang 屬性的元素。

進行隨堂測驗

測驗您對簡易選取器的瞭解

* {}

上述程式碼片段使用了哪種簡易選取器?

屬性
通用
類別
ID
div {}

上述程式碼片段使用了哪種簡易選取器?

ID
類型
類別
屬性

擬類別和擬元素

CSS 提供實用的選取器類型,可著重於特定平台狀態,例如元素游標、元素「內部」的結構或元素的部分。

擬類別

HTML 元素會處於各種狀態,可能是因為與其互動,或是其中一個子元素處於特定狀態。

舉例來說,使用者可以使用滑鼠游標懸停在 HTML 元素上,使用者也可以懸停在子元素上。在這種情況下,請使用 :hover 擬似類別。

/* Our link is hovered */
a:hover {
  outline: 1px dotted green;
}

/* Sets all even paragraphs to have a different background */
p:nth-child(even) {
  background: floralwhite;
}

詳情請參閱擬似類別模組

擬元素

虛擬元素與虛擬類別不同,因為虛擬元素不會回應平台狀態,而是會以 CSS 插入新元素的方式運作。虛擬元素在語法上也與虛擬類別不同,因為我們使用的是雙冒號 (::),而非單冒號 (:)。

.my-element::before {
  content: 'Prefix - ';
}

如同上述示範,您可以使用 ::before 擬元素,在元素開頭插入內容,或是使用 ::after 擬元素,在元素結尾插入內容。

不過,這類元素不限於插入內容。您也可以使用這些屬性指定元素的特定部分。舉例來說,假設您有一份清單。使用 ::marker 為清單中的每個項目符號 (或編號) 套用樣式

/* Your list will now either have red dots, or red numbers */
li::marker {
  color: red;
}

您也可以使用 ::selection 為使用者醒目顯示的內容設定樣式。

::selection {
  background: black;
  color: white;
}

如要進一步瞭解,請參閱模擬元素單元

進行隨堂測驗

測驗您對擬造選取器的瞭解

虛擬元素選取器使用多少個冒號?

:::
::
:
p:hover {
  background: white;
  color: black;
}

上述程式碼片段使用的是哪種擬似選擇器?

擬元素
虛擬類別

複雜選取器

您已經看到許多選取器,但有時您需要在 CSS 中使用更精細的控制項。這時複雜的選取器就能派上用場。

在此值得一提的是,雖然下列選取器可提供更強大的功能,但我們只能向下層層展開,選取子元素。我們無法向上指定目標並選取父項元素。我們會在後續課程中介紹層疊的定義和運作方式。

組合運算子

組合運算子是兩個選取器之間的運算子。舉例來說,如果選取器是 p > strong,則組合運算符是 > 字元。使用這些組合函式的選取器可根據項目在文件中的順序選取項目。

子系組合函式

如要瞭解子項組合函式,您必須先瞭解父項和子項元素。

<p>A paragraph of text with some <strong>bold text for emphasis</strong>.</p>

父項元素是包含文字的 <p><p> 元素內含 <strong> 元素,可將內容設為粗體。因為它位於 <p> 內,因此是子元素。

子項組合函式可讓我們指定子元素。這會使用空格 () 指示瀏覽器尋找子元素:

p strong {
  color: blue;
}

這個程式碼片段只會選取所有屬於 <p> 元素的子項的 <strong> 元素,並以遞迴方式將這些元素設為藍色。

由於子項組合器是遞迴的,因此套用至每個子項元素的邊框間距會生效,產生交錯效果。

在上述範例中,使用組合器選取器 .top div 可更清楚呈現此效果。這個 CSS 規則會為這些 <div> 元素新增左邊框間距。由於組合函式是遞迴的,因此 .top 中的所有 <div> 元素都會套用相同的邊框間距。

請查看這個示範中的 HTML 面板,瞭解 .top 元素如何含有幾個 <div> 子元素,而這些子元素本身也含有 <div> 子元素。

下一個同層元素組合函式

您可以在選取器中使用 + 字元,尋找緊接在另一個元素後面的元素。

如要在堆疊元素之間加入空格,請使用下一個同胞兄弟組合函式,僅在元素為 .top 子項元素的下一個同胞兄弟時,新增空格。

您可以使用下列選取器,為 .top 的所有子項元素新增邊距:

.top * {
  margin-top: 1em;
}

這個做法的缺點是,由於您會選取 .top 的每個子項元素,因此這個規則可能會產生額外的不必要空間。下一個同胞元件組合元式通用選取器搭配使用時,不僅可控制哪些元素會取得空間,還可將空間套用至任何元素。無論 .top 中顯示哪些 HTML 元素,這都能為您提供長期的彈性。

後續同層組合函式

後續的組合運算子與下一個同胞兄弟/姊妹選取器非常相似。不過,請改用 ~ 字元,而非 + 字元。差異在於元素只需緊隨同一個父項的另一個元素,而非同一個父項的下一個元素。

使用後續的選取器搭配 `:checked` 擬造類別,建立純 CSS 切換元素。

這個後續的組合函式提供較不嚴格的做法,在上述範例等情境中相當實用,因為我們會在自訂切換鈕的關聯核取方塊具有 :checked 狀態時,變更切換鈕的顏色。

子項組合函式

子項組合器 (也稱為直接子項) 可讓您進一步控制組合器選取器的遞迴。使用 > 字元可限制組合元件選取器,只將套用至直接子項。

請參考先前的下一個同胞元素選取器範例。空格會加入每個同層相鄰元素,但如果其中一個元素也有同層相鄰元素做為子項,就可能會產生不必要的額外空格。

為緩解這個問題,請變更下一個同胞選取器,以納入子組合器:> * + *。這項規則現在「只」套用至 .top 的直接子項。

複合式選取器

您可以結合選取器,提高特定性和可讀性。舉例來說,如要指定 <a> 元素 (同時具有 .my-class 類別),請編寫以下內容:

a.my-class {
  color: red;
}

這不會為所有連結套用紅色,而且只會在 <a> 元素上為 .my-class 套用紅色if。詳情請參閱特定性模組

進行隨堂測驗

測試您對複雜選取器的瞭解

下列哪個符號不是選取器組合符號?

÷
*
>
+
section.awesome {
  border: 1px solid hotpink;
}

上述選取器是...

終結符
組合函式
複合選取器

資源