CSS選擇器簡介

完整的選擇器看這裡：[Try CSS Selector (w3schools.com)](https://www.w3schools.com/cssref/trysel.php?)

完整查詢看這邊：https://caniuse.com/

練習在這邊https://flukeout.github.io/

CSS 選擇器用來選擇需要應用樣式的 HTML 元素。不同類型的選擇器可以根據元素的標籤、類別、ID、屬性等來選擇元素。以下是一些常用的 CSS 選擇器及其用法：

選擇器類型 說明 範例
元素選擇器 選擇所有指定標籤的元素 p { color: blue; }
類別選擇器 選擇所有具有指定類別的元素 .class-name { font-size: 14px; }
ID 選擇器 選擇具有指定 ID 的元素 #id-name { background-color: yellow; }
通用選擇器 選擇所有元素 * { margin: 0; }
後代選擇器 選擇在特定父元素內的特定子元素 div p { color: red; }
子選擇器 選擇特定父元素的直接子元素 ul > li { list-style: none; }
相鄰兄弟選擇器 選擇緊接在特定元素後面的元素 h1 + p { font-size: 16px; }
通用兄弟選擇器 選擇同一父元素下在特定元素後面的所有元素 h1 ~ p { color: green; }
屬性選擇器 選擇具有特定屬性或屬性值的元素 a[href] { text-decoration: none; }
偽類選擇器 選擇元素的特定狀態或部分 a:hover { color: blue; }
偽元素選擇器 選擇元素的特定部分，像是第一行或第一個字 p::first-line { font-weight: bold; }

↡可參考的課堂練習(選擇器如何運作)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 1.CSS會區分文字大小寫 -->
    <!-- 2.CSS註解方式為 /* */ -->

    <style>
        /*   基本類型: 標籤(tag name)、#id、.class  */
       
        /* Type selector (標籤|類型選擇器)
           使用 標籤(tag name) 挑選元素並設定樣式 */

           /* h1 {
            color: red;
            font-size: 24px;
        } */
         /* 你可以指定任意元素全部的樣式，*/

         h4.pokemon {
            color: blue;
            border: 3px solid black;
        }

        /* ID selector (ID選擇器)
           使用 #id 挑選元素並設定樣式 */

        #pikachu {
            color:yellow;
        }
        /* Class selector (類別選擇器)
           使用 .class 挑選元素並設定樣式 */
           .pokemon {
            background-color: lightblue;
           }
           .Pokemon{
            background-color: lightgreen;
           }
           .fire{
            border: 2px solid red;}

    </style>
</head>

<body>
    <h1 class="Pokemon fire">小火龍</h1>
    <!-- 一個Class可以有同時放多個css屬性，並且可以重複使用 -->
    <h2 id="pikachu">皮卡丘</h2>
    <!-- 可以用ID選擇器來指定元素，並且只對該元素有效 -->
    <h3 class="Pokemon">卡比獸</h3>
    <!-- 大寫與小寫在CSS當中會被視為不同 -->
    <h4 class="pokemon">胖丁</h4>
    <h4>傑尼龜</h4>
</body>

</html>

關於選擇器的優先級

當我們在網頁上設計樣式時，我們可能會對同一個元素應用多種不同的 CSS 樣式。為了知道哪個樣式會實際生效，我們需要了解「選取器的明確性」，也就是「誰的聲音比較大」。

想像一下，選取器是不同權力的人在決定穿什麼衣服

  1. 最強勢的人（內聯樣式）：這是直接在 HTML 裡面寫的樣式，比如 <div style="color: red;">。他們就像家長直接幫你選衣服，意見最大，幾乎總是他說了算。
  2. 稍弱的人（ID 選取器）：ID 選取器是像大哥大姐的意見，比如 #header。他們的意見很重要，但還是比不過家長。
  3. 一般人（類別和屬性選取器）：像同學朋友的意見，代表你的「風格團隊」，比如 .menu 或 [type="text"]。這些意見比大哥大姐弱一些。
  4. 最小的聲音（元素選取器）：這些是你自己挑的款式，比如 p、div。它們的影響力最小，容易被別人的意見覆蓋掉。