組合選擇器的優先順序

• 比較優先順序時，保證精準控制到了元素
• 比較id選擇器，如果id多，那優先順序高
• id選擇器一樣多時，比較class選擇器，class多的則優先順序高
• class如果相等，比較標籤選擇器，標籤選擇器多則優先順序高
• 偽類選擇器，如hover，優先順序相當於類名class

偽類選擇器

 用於向某些選擇器新增特殊的效果。

錨偽類 : 
在支援 CSS 的瀏覽器中，連結的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已
被訪問狀態，未被訪問狀態，和滑鼠懸停狀態。

1. link  未被點選的連結
2. visited  已被點選的連結
3. active  選定的時候
4. hover  滑鼠懸停的時候

div：hover{}/*選擇自己本身*/
div p：hover a{}/*後代元素如何選中*/
div + p：hover a{}/*兄弟元素如何選中*/

結構性偽類選擇器

 根據巢狀結構選擇元素(用起來還是很舒服的,但是屬於css3部分,低版本瀏覽器不相容)

1. li:first-of-type{background:red;}
   /*選擇父元素裡面的第一個li元素 無視其他元素*/

   <ul>
       <li>小明</li>
       <li> 小王
   <ul>
       <li>小綠</li>
   </ul>
       </li>
   </ul>
    
   

    

2. li:last-of-type{background:blue;}
   /*選擇父元素裡面的倒數第一個li元素 無視其他元素*/

    

3. p:only-of-type{background:;}

   /*選擇父級元素裡面唯一的p 可以存在其他子元素*/
   <div>
       <span></span>
       <p></p>
       <span></span>
   </div>

    

4. li:first-child{background:;}
   /*選擇父元素的第一個元素 並要求第一個元素為li*/
    
   

   <ul>
       <li></li>
       <li></li>
       <li></li>
   </ul>

    

5. li:last-child{color:;}
   /*選擇父元素的倒數第一個元素 並要求這個元素為li */

   <ul>
       <li></li>
       <li></li>
       <li></li>
   </ul>

    

6. p:only-child{background:;}
   /*選擇父元素中唯一的子元素p 不允許有其他子元素*/

    

7. p:nth-of-type(2){background:;}
   /*選擇父元素中第二個p元素 無視其他元素*/

    

8. p:nth-last-of-type(2){bakcground:;}
   /*選擇父元素中倒數第二個p元素 無視其他元素*/

    

9. p:nth-child(2)
   /*選擇父元素中第二個子元素 並要求此元素為p*/

    

10. p:nth-last-child(2){background:;}
    /*選擇父元素中倒數第二個子元素 並要求此元素為p*/

     

11. p:not(.box){color:red;}
    /*選擇除了.box之外的p*/

     

12. E：first-line
    表示E元素中的第一行
    E：first-letter
    表示E元素中的第一個字元
    E::selection{background:;}

     

偽元素選擇器

通過樣式的方式在元素後面新增內容 字面意思假的元素

:before 元素內容裡的最前面新增內容 
:after 元素內容裡的最後面新增內容 
::為了區分偽類

屬性選擇器

根據屬性和屬性值選擇元素

[class] 匹配所有具有class屬性的元素  
[class=’box’] 匹配所有具有class屬性並且值等於box的元素 不僅要具備class屬性 並且值也要
符合  
img[src^='image'] 選擇src屬性以image開頭的img標籤 
img[src$='png'] 選擇src屬性以png結尾的img標籤