選擇器

CSS Podcast - 002：選取器

如果您只想要放大部分文字，並為文章第一段顯示紅色，該怎麼做？

<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 規則圖片。

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

簡易選取器

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

通用選取器

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

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

* {
  color: hotpink;
}

這項規則會導致網頁上的每個 HTML 元素都具有熱粉色文字。

類型選取器

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

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

section {
  padding: 2em;
}

這項規則會導致所有 <section> 元素在各邊的 2em 為 padding。

類別選取器

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

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 選取器

瀏覽器支援

  • 1
  • 12
  • 1
  • 1

資料來源

含有 id 屬性的 HTML 元素必須是網頁上該 ID 值的唯一元素。您可以使用 ID 選取器選取元素，如下所示：

#rad {
  border: 1px solid blue;
}

這個 CSS 會將藍色邊框套用至 id 為 rad 的 HTML 元素，如下所示：

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

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

屬性選取器

瀏覽器支援

  • 1
  • 12
  • 1
  • 3

資料來源

您可以使用屬性選取器，找出包含特定 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-type 是 Primary，而不是 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
# 是用於 ID 簡易選取器。
通用
* 是通用的簡易選取器。
類別
. 可用於類別的簡易選取器。
 
div {}

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

類別
. 可用於類別的簡易選取器。
類型
element 名稱用於 type 簡易選取器。
屬性
方括號 [] 是用於 屬性 的簡易選取器。
ID
# 是用於 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 的精細控制。這樣一來，複雜的選取器就能派上用場。

在此提醒您，雖然下列選取器賦予我們的權力，但只能向下邊緣選取子元素。因此無法向上指定，並選取父項元素。 我們會在後續課程中說明 Cascade 和運作方式。

組合器

選取器位於兩個選取器之間。舉例來說，如果選取器是 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 的直接子項。

複合選取器

您可以合併選取條件，提高明確性和可讀性。舉例來說，如要指定包含 .my-class 類別的 <a> 元素，請編寫以下內容：

a.my-class {
  color: red;
}

這個做法不會為所有連結套用紅色，而且只會將紅色顏色套用至 .my-class (位於 <a> 元素上)。if詳情請參閱具體性模組。

隨堂測驗

測驗您對複雜選取器的相關知識

下列哪一個符號「不是」選取器組合？

>
直接子系組合。
÷
無效，不是 CSS 符號。
+
下一個同層級組合。
*
這個通用的簡易選取器。
.
類別的簡單選取器。
 
section.awesome {
  border: 1px solid hotpink;
}

上方的選取器是...

組合器
這個符號可用於將選取器合併成更具體的選取器。
複合選取器
如果想建立更精準的選取器，當同時使用 2 個以上的選取器 (沒有組合器) 時。
魔鬼終結者
不是選取器類型，但似乎不是選取器類型嗎？🤖

資源