概念

想用 CSS 替元素更改樣式，得先要"選"到目標，才能套用我們所撰寫的規則，而其中"怎麼選"，就是使用到 CSS Selector(選擇器 or 選取器) 來幫我們找到特定的元素！

1. CSS 規則的組成

.article {
    color: #cdcdcd;
    background: black;
}

其中

• .article 為 Selector
• color: #cdcdcd; 為宣告的一項規則
  • color 為屬性
  • #cdcdcd 為屬性值
• 所有宣告的規則用大括號包住

Selector 會在頁面上遍歷所有的元素，並找出 class 為 article 的元素

2. Selector 分類

CSS 提供非常非常多的方式讓我們可以選取元素，大致分成兩類：Simple selectors 和 Complex selectors

Simple selectors

最直觀的寫法，包含以下：

• Universal selector：* 選擇所有元素
• Type selector：選擇特定的 HTML 元素，例如： section、h1
• Class selector：在所有元素中選擇具有特定 class 的元素
• ID selector：在頁面中尋找符合特定 ID 的一個元素 (ID 應該要是唯一值，不重複)
• Attribute selector：使用 []，尋找具有特定屬性或是特定屬性值的元素
• Group selectors：以逗號區隔多個 selector，用來選取多個元素

＊ 補充：class 或是 id 的命名不能以數字開頭

Attribute selector 用法範例：

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

/* 尋找具有 data-type 屬性且屬性值為 primary 的元素 */
[data-type='primary'] {
  color: red;
}

/* 尋找具有 data-type 屬性的元素 */
[data-type] {
  color: red;
}

/* 在 [] 中加上 s 或 i，用來表示屬性值的比對是否要區分大小寫 */
/* s 代表要區分大小寫，會尋找具有 data-type 屬性且屬性值為 Primary 的元素 */
[data-type='Primary' s] {
  color: red;
}

/* 可以寫多組 attr 規則，例如：要找出以 https:// 開頭，並以 .org 結尾的連結 */
a[href^="https://"][href$=".org"]
{
  color: green;
}

Complex selectors

如果以上的 selector 沒辦法達到需求，可以再使用 complex selectors 做到更精準的選擇

• Combinators：依據元素在 Document 中的位置做選取。通常會放在兩個 selectors 的中間做連接，例如 p > strong 中的 >
  • Descendant combinator：使用 空白 來遍歷其下所有的子元素
  • Next sibling combinator：使用 + 來找緊鄰的第一個元素 (必須屬於同一個父元素)
  • Subsequent-sibling combinator：使用 ~ 來找屬於同一個父層的元素
  • Child combinator：使用 > 來找下一層的子元素 (不會一直往下遍歷)
• Compound selectors：綜合多個 selectors 做多條件的選擇，必須全部符合才會選取

3. Pseudo-classes & Pseudo elements

Pseudo-classes

pseudo-class 也是一個 selector，可以根據元素的狀態做選擇，使用: 開頭來表示，例如：

• p:first-of-type：第一個 p 元素
• button:hover：被 Hover 的 Button 元素

最直觀可以根據位置、順序、個數來選擇，像是 :last-child、:only-child
另一種則是和使用者操作行為相關的 pseudo classes，例如 :hover、:focus

＊位置、次序、是否被 hover 都是浮動的狀態，可能隨時都會改變，屬於 Pseudo classes

Pseudo elements

類似加入一段 HTML 元素到 markup 中，使用 :: 開頭表示，例如：

• ::before：和 ::after 一樣，使用 content 來插入新的內容
• ::first-line：針對某一個段落，只選擇第一行 (類似將第一行幫我們用看不到的元素包起來)
• ::marker：list 項目前方的符號或是數字
• ::selection：被使用者反白選取的內容

＊類似於一段用 CSS 產生的虛擬元素，不存在於 HTML Markup 中

補充

Selectors Explained，這個是 web.dev 所附的參考，可以貼上 selectors 做解釋，幫助熟悉 selector 的用法

隨便瀏覽一個網頁，打開 DevTools 選擇要 selector 的元素，右鍵選擇 Copy -> Copy Selector，如下圖

會得到一串很長很長的 selector (純練習用)
#gc-wrapper > main > devsite-content > article > div.devsite-article-body.clearfix > p:nth-child(156)

貼到 Selectors Explained

參考資源

MDN Web Docs - Pseudo-classes and pseudo-elements