css選擇器，帶例項

前端css選擇器種類繁多，今天做了一下整理，不過該文章只適合前端小萌新，老油條請繞道。

1. 常見選擇器

1. 元素選擇器

a,p,div,li,ul{
    color:red;
}
/*頁面上所有的a,p,li,ul都會將字型顏色設定為紅色，不過優先順序最低*/

2. id選擇器

<p id="test">我會紅</p>
<style>
    #test{
        color:red;
    }
    /*id選擇器通過id屬性來繫結一個唯一id，樣式通過# + ‘id’來實現關聯，優先順序較高*/
</style>

3. 類選擇器

<p class="test">我會紅</p>
<style>
    .test{
        color:red;
    }
    /*類選擇器通過class屬性來繫結一個類名，樣式通過. + ‘class’來實現關聯，優先順序低於id選擇器*/
</style>

4. 屬性選擇器

<a class="test" src='/test.html'>我會紅</a>
<style>
   [src^="test"]{
       color:blue;
   }
   .test[src]{
       color:red;
   }
   /*屬性選擇器通過[attr=*]來選擇具有該屬性的元素，屬性值支援萬用字元(不做具體詳解)形式，優先順序較低，多種選擇器可以結合使用，上例中，後者優先順序高於前者，所以呈現的字型為紅色。*/
</style>

2.子元素和後代元素選擇器

<p>我不會變色</p>
<ul>
   <li>我是子元素<span>我是子子元素</span></li>
   <li>我是第二個子元素</li>
   <li>
       <li>我是li裡面的li</li>
   </li>
</ul>
<p>我會變紅</p>
<style>
   ul li{
       margin-left:20px;
   }
   /*通過空格隔開的方式選擇所有子元素，這樣，ul裡面的所有li都會應用到左邊距20px的樣式,包括li裡面的li*/
   ul>li{
       padding-left:20px;
   }
   /*通過選擇器 > 選擇器 來選擇直接子元素，意思是說，只有第一級的li會被應用成左內邊距20px,而li裡面的li不會被應用到。*/
   ul + p{
       background-colo:red;
   }
   /*通過 選擇器 + 選擇器 來選擇兄弟元素，這樣讓下面的p元素的背景色為紅色，而第一個p標籤的背景色不會變。*/
</style>

3偽類選擇器

偽類專門用來表示元素的一種的特殊的狀態。
比如：訪問過的超連結，比如普通的超連結，比如獲取焦點的文字框。
當我們需要為處在這些特殊狀態的元素設定樣式時，就可以使用偽類。

:link,表示普通的連結（沒訪問過的連結）
:visited,表示訪問過的連結
:hover,表示滑鼠移入的狀態
:active,表示的是超連結被點選的狀態
:focus,表示文字框獲取焦點
ps: :hover和:active也可以為其他元素設定(ie6不支援)

說明：普通標籤支援:hover,:focus,其他偽類只有一些特定的標籤才支援，比如說：a標籤支援:visited,:active,link；button支援:active,:focus。舉例：

<a class="test" src='/test.html'>我是連線</a>
<button>點我我就綠</button>
<style>
   a:link{
       color:blue;
   }
   /*連線未被訪問過，為blue顏色*/
   a:visited{
       color:red;
   }
   /*訪問之後，變成紅色*/
   a:hover{
       font-size:40px;
   }
   /*滑鼠一上去，字型變大*/
   button:focus{
       color:green;
   }
   /*點選按鈕，按鈕聚焦，會變成綠色*/
   button:active{
       color:red;
   }
   /*點選按鈕的過程中，按鈕顏色會變紅*/
</style>

4偽元素選擇器

p:first-letter
作用：選擇p中第一個字元
p:first-line,選擇p中的第一行
:before,表示元素最前邊的部分， 一般before都需要結合content這個樣式一起使用，通過content可以向before或after的位置新增一些內容
:after,表示元素的最後邊的部分

5子元素偽類選擇器

:first-child 可以選中第一個子元素
:last-child 可以選中最後一個子元素
:nth-child(XXX) 可以選中任意位置的子元素,該選擇器後邊可以指定一個引數，指定要選中第幾個子元素,even 表示偶數位置的子元素,odd 表示奇數位置的子元素。
:first-of-type、:last-of-type、:nth-of-type和:first-child這些非常的類似，只不過child，是在所有的子元素中排列，而type，是在當前型別的子元素中排列

6優先順序

很明顯，上面多種選擇器直接，會存在交叉和衝突，很多地方庫，我們在引入的時候，需要覆蓋原來的樣式，這時候可以利用選擇器優先順序來覆蓋原來庫裡面的樣式。
元素選擇器 < 屬性選擇器 < 類名選擇器 < id選擇器。給樣式增加!important,會提高樣式的優先順序，不過不建議使用。如果是相同的優先順序，則後寫的樣式會覆蓋前面寫的樣式。子選擇器的優先順序低於直接選擇的優先順序。多個類名的組合的優先順序會高於單個類名的優先順序。多級的子選擇器會比一級的子選擇器優先順序高。

寫在最後：
想看更多文章，可以關注我的個人公眾號：