選擇器

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 規則是一段程式碼 包含一或多個選取器以及一或多個宣告。

包含選取器 .my-css-rule 的 CSS 規則圖片。

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

簡易選取器

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

通用選取器

瀏覽器支援

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

資料來源

通用選取器 (也稱為萬用字元) 會比對任何元素。

* {
  color: hotpink;
}

這項規則會使網頁上的每個 HTML 元素都含有彩色文字。

類型選取器

瀏覽器支援

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

資料來源

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

section {
  padding: 2em;
}

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

類別選取器

瀏覽器支援

  • Chrome：1.
  • Edge：12.
  • Firefox：1.
  • Safari：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 中的常見模式，當中的特殊字元 或一組字元) 來定義選取器類型。

類別為 .my-class 的 HTML 元素仍會與上述 CSS 規則相符。 也可以和班級一起使用：

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

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

ID 選取器

瀏覽器支援

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

資料來源

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

#rad {
  border: 1px solid blue;
}

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

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

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

屬性選取器

瀏覽器支援

  • Chrome：1.
  • Edge：12.
  • Firefox：1.
  • Safari：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。 這時複雜的選取器就能派上用場。

請特別留意，雖然下列選取器能提供我們更多功能 我們只能向下移植選取子元素 但無法指定向上或選取父項元素。 我們將介紹串聯資料及其運作方式 請見後續課程。

組合器

組合就是位於兩個選取器之間。 舉例來說，如果選取器是 p > strong，組合器就是 > 字元。 透過選取器，您可依據這些合併工具在文件中的位置選取項目。

子系組合

想要瞭解子組合器 必須先瞭解父項和子項元素

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

父項元素是含有文字的 <p>。 其中 <p> 元素是 <strong> 元素，內容會變為粗體。 由於位於 <p> 中，因此屬於子項元素。

子系組合讓我們可以指定子元素。 這會使用空格 () 指示瀏覽器尋找子元素：

p strong {
  color: blue;
}

這段程式碼選取了全部 <strong> 個元素 只有 <p> 元素的子項元素，使這些元素以遞迴方式呈現藍色。

因為子系組合具有遞迴性 套用每個子項元素的邊框間距，就會產生交錯效果。

這個效果在上例中更加清楚可見 使用組合選取器 .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。 詳情請參閱具體性模組。

隨堂測驗

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

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

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

上述的選取器是...

組合器
符號是用來將選取器合併成更具體的一個。
複合選取器
同時使用 2 個以上的選取器 (不含組合器) 時，系統會建立更明確的選取器。
魔鬼終結者
這並非選取器類型，但聽起來不是選擇類型？🤖

資源