一個完整的網站由 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: navy;
}

p {
  color: dodgerblue;
  font-weight: bold;
}

• 在第一個 CSS 規則，選取了 <h1> 元素，並將該元素的文字顏色呈現navy
• 在第二個 CSS 規則，選取了 <p> 元素，並將該文字顏色呈現dodgerblue且粗體

結果會是長成這個樣子：

💠選擇器種類

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

基本選擇器

• 通用選擇器（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）

• :is
• :hover
• :focus & :focus-visible
• :first-child & :last-child
• :nth-child
• :first-of-type & :last-of-type
• :nth-of-type
• :nth-last-child & :nth-last-of-type
• :only-child & :only-of-type
• :root
• :empty
• :not
• :checked
• :disabled & :enabled

偽元素 (Pseudo Elements)

• ::first-letter
• ::first-line
• ::selection
• ::-webkit-scrollbar
• ::before
• ::after

本文將同步更新至 Lala Code