前言

一個完整的網站由 HTML、CSS 和 JavaScript 三者協同運作，各司其職，缺一不可。HTML 負責網站的結構，CSS 負責視覺美感，而 JavaScript 則處理動作與使用者互動。

這次的主題以掌管「視覺」的 CSS 為主，網站需要藉由 CSS 來美化，想像一下，如果一個網站沒有 CSS，會是多麼單調！不信的話，讓我們來看看以下的範例：：

這是 2024 iThome 鐵人賽的報名頁面

如果沒有 CSS 美化就會變成這樣 (抱歉，傷了大家的眼睛)

是不是很可怕！CSS 對網站來說真是太重要了！

因此，我們可以運用 CSS 的各種屬性來打造一個美麗的網站，而這一切的實現，都必須依賴 CSS 選擇器。本次主題將深入探討各類 CSS 選擇器，了解如何使用、組合它們，從而創造出一個引人注目的網站外觀。

# 什麼是 CSS 選擇器(Selector)

就如前面所提到的，HTML 負責網站的架構，其中包含許多標籤元素。為了對這些元素應用樣式，我們需要使用 CSS 選擇器來找到並選定這些 HTML 元素，然後為它們加上樣式。簡單來說，CSS 選擇器就是幫助我們定位和選擇特定 HTML 元素的工具。

# 如何使用選擇器

先選定好指定元素後，就可增添樣式屬性區塊。

語法

選擇器 {
  屬性名: 屬性值;
}

範例

<h1>Lala Code</h1>
<p>一起來學 CSS 選擇器吧！</p>

h1 {
  color: green;
}

p {
  color: red;
}

• 在第一個 CSS 規則，選取了 <h1> 元素，並將該元素的文字變成了綠色。
• 在第二個 CSS 規則，選取了 <p> 元素，並將該元素的文字變成了紅色。

結果會是長成這個樣子：

# 選擇器種類

以下是在本主題將會介紹到的各種選擇器

基本選擇器

• 通用選擇器（Universal Selectors）
• 元素選擇器（Type Selectors）
• 類選擇器（Class Selectors）
• ID 選擇器（ID Selectors）
• 屬性選擇器（Attribute Selectors）

複合選擇器

• 交集選擇器（Intersection Selector）
• 選擇器列表（Selector List）
• 後代選擇器（Descendant Combinator）
• 子代選擇器（Child Combinator）
• 相鄰兄弟選擇器（Next-Sibling Combinator）
• 通用兄弟選擇器（Subsequent-Sibling Combinator）

虛擬類別選擇器（Pseudo-Class Selector）

• :hover
• :focus
• :focus-visible
• :first-child
• :last-child
• :nth-child(n)
• :first-of-type
• :last-of-type
• :nth-of-type(n)
• :nth-last-child(n)
• :nth-last-of-type(n)
• :only-child
• :only-of-type
• :root
• :empty
• :not
• :checked
• :disabled
• :enabled

偽元素 (Pseudo Elements)

• ::first-letter
• ::first-line
• ::selection
• ::placeholder
• ::before
• ::after