05-12.07 選擇器

01元素選擇符（基礎選擇器）

01-1標籤選擇器

直接用標籤名進行選擇
格式：

div{
            color: red;
        }

解釋：直接作用在當前網頁所有div標籤上，使字型顏色變成紅色。
作用：

1. 因為是作用在所有選中的某標籤上，因此可利用該特性進行標籤樣式的清除；
2. 複雜選擇器中一部分使用。

01-2 ID選擇器

通過定義唯一的一個ID來進行選擇標籤。
格式：（#id）

 #div2{
            color: red;
        }

<div id="div2">我是div2</div>

解釋：在body中的某一個div標籤新增了id屬性，id值為div2，通過ID選擇器對此di值進行選擇，並定義字型顏色為紅色。

【注】：

1. id值必須是唯一的，在一個頁面中只能出現一次。如果多次出現重複的ID值是不符合規範的。
2. 所有的標籤都有ID屬性。ID命名的規範：由字母，下劃線，中劃線，數字組成。不能以數字開頭。
3. 見名知意。不要起毫無意思的名字。
4. 駝峰寫法：SearchButton(大駝峰) searchButton(小駝峰，推薦) 多個單詞，從第二個單詞開始，每個單詞的首字母大寫。
5. 下劃線寫法：search_button 多個單詞，從第二個單詞開始，每個單詞的前面新增一條下劃線。
6. id選擇器儘量不要在css中使用，而是配合js使用。

01-3 類選擇器

通過標籤中的class屬性選擇標籤
格式：（.class）

 .redFont{
            color: red;
        }

<p class="redFont">選擇器練習</p>

解釋：選擇標籤中含有class值為redFont的標籤來定義其字型顏色為紅色。
作用： 可以選擇所有class值相同的標籤設定相同的樣式。

01-4萬用字元

直接用“*”（星號）選中所有標籤（包含body標籤）
作用：

1. 對所有（含body）標籤進行統一樣式
2. 通常用在清除預設樣式的場景中。但實際專案中不常用，某些標籤本來沒有樣式也會被執行，該方法效率低下，因此還是選擇需要清除的標籤進行格式清除。

02高階選擇器

02-1交集選擇器

交集：兩個條件都要滿足
格式：

span.nav.span1{
            background-color: royalblue;
        }

解釋：從紅色span到紫色nav，再到到黃色span1標籤
注意：如果是標籤選擇器與類選擇器的混寫，則必須將標籤選擇器放在前面。如上文中的先寫span標籤，再寫.span1。

02-2並集選擇器

格式：（逗號隔開）

h1,h2,span{
            color: royalblue;
        }

解釋：同時選擇h1，h2，span標籤並將字型顏色改為皇室藍。

02-3關係選擇器

02-3-1後代選擇器（空格連線）

即通過標籤的巢狀關係，來縮小選擇範圍，在範圍內查詢相關的元素。

p span{
            background-color: rebeccapurple;
        }

 <p>
        <span>我是span標籤</span>
    </p>

解釋：span標籤是p標籤的後代標籤。先寫祖先元素再用空格連線後代元素。
作用：當要把某些元素中的某些後代元素進行樣式修改時，就要想要使用後代選擇器。

02-3-2 子代選擇器（“>”（大於號）連線）

也是通過標籤的巢狀關係來選擇標籤，不過比後代應用範圍小。
格式：

p>span{
            background-color: rebeccapurple;
        }

 <p>
        <span>我是span標籤</span>
    </p>

解釋：同後代選擇器。只不過子代只能侷限在兩級之間，不能跨級。

02-3-3 相鄰選擇器（+號連線）

格式：

 h3 + p{
            color: slateblue;
        }

    <p>唐詩</p>
    <h3>題都城南莊</h3>
    <span>崔戶</span>
    <p>去年今日此門中</p>

解釋：選擇緊貼在h3後面的p標籤。此例中，h3上下的p標籤字型樣式均不會被修改。因為“唐詩”的p標籤不在h3後面，“去年今日此門中”的p標籤不是緊貼在h3後面。

另外，相鄰選擇器中用到的兩個標籤必須同屬一一個父級。

02-3-4 兄弟選擇器

格式：

   h3 ~ p{
            color: slateblue;
        }

    <p>去年今日此門中</p>
    <h3>題都城南莊</h3>
    <p>去年今日此門中</p>
    <p>人面桃花相映紅</p>
    <p>人面不知何處去</p>
    <p>桃花依舊笑春風</p>
    <div>
        <p>最後一個p標籤/p>
    </div>

解釋：對h3標籤的p標籤兄弟們進行樣式的改變。示例中會被改變的是 “去年今日此門中 人面桃花相映紅 人面不知何處去 桃花依舊笑春風”這四行。而最後一個p標籤與h3不是同級，是他的父級div與h3同級，因此不會被修改樣式。

02-4偽類選擇器

02-4-1 E：first / last / only - child 序選擇器

• E:first-child：當E標籤是其父標籤的第一個子標籤時，作用的樣式才會生效
• E:last-child：當E標籤是其父標籤的最後一個子標籤時，作用的樣式才會生效
• E:only-child：當E標籤是其父標籤的唯一一個子標籤時，作用的樣式才會生效

02-4-2 E:nth-child(2n)或（2n+1）

當父標籤下的第2n個（或2n+1）個標籤是E標籤時才會生效。

02-4-3 E:nth-of-type(2n)或（2n+1）

選中父標籤下的第2n個（或2n+1）個E標籤。
其中n是自然數（0，1，2，3，4，5…），2n+1表示從第一項開始，若需從第2項開始，則2n+3

02-4-4 E:not(s)

選中不具有s屬性的E標籤。

02-4-5 E:link

是滑鼠點選連結之前顯示的樣式。靜態偽類，只用於超連結。

02-4-6 E:visited.

是滑鼠點選連結之後顯示的樣式。靜態偽類，只用於超連結。

02-4-7 E:hover

是滑鼠懸停在連結上時顯示的樣式。動態偽類，可用於所有標籤。

02-4-8 E:active

是滑鼠在連結上保持點選狀態時顯示的樣式。動態偽類，可用於所有標籤。
link——visited——hover——active這四個在使用時，需按照順序從前到後。記憶口訣：愛恨準則：love-h ate。不過在實際專案中一般不做link/visited樣式的單獨書寫，點選頁面前後的樣式是一樣的。所以直接用a標籤寫樣式就可以了。

02-4-9 E:focus

當某個標籤獲得焦點時的樣式。只用於表單。

 input:focus {
            background-color: yellow;
        }

  賬戶名：<input type="text">

小遊戲

https://flukeout.github.io/
可以進這個網頁練習以上選擇器，27關前均可。