以css偽類為基礎,引發的選擇器討論 [新手向]

作為第一篇技術乾貨，來寫哪個方面的內容，我著實考慮了很久。

經過了整整30秒的深思熟慮，我決定就我第一次發現新大陸一樣的內容，來進行一次討論。

1. 偽類：
   偽類對元素進行分類是基於特征(characteristics)而不是它們的名字、屬性或者內容；原則上特征是不可以從文檔樹上推斷得到的。
   這是百度百科給的解釋。不過，大家心裡應該都有偽類的概念，看來百科也許更懵逼也說不定。所以還是直接上代碼吧。
2. 簡單的使用：
   

    1 <div id='ancestor'>
    2   <div id="father">
    3     <div id="son">
    4     </div>
    5   </div>
    6 </div>
    7 
    8 <style>
    9 #ancestor{
   10   width: 150px;
   11   height: 150px;
   12   background-color: #f00;
   13 }
   14 #father{
   15   width: 100px;
   16   height: 100px;
   17   background-color: #0f0;
   18 }
   19 #son{
   20   width: 50px;
   21   height: 50px;
   22   background-color: #00f;
   23 }
   24 #ancestor:hover{
   25   transform: rotate(45deg);
   26 }
   27 </style>

   View Code

    這段代碼，十分簡單應該大家都能看的懂，效果也可以預知，下麵我們就來做一點。

3. 代碼變異：
   

    1 <div id='ancestor'>
    2   <div id="father">
    3     <div id="son">
    4     </div>
    5   </div>
    6 </div>
    7 
    8 <style>
    9 #ancestor{
   10   width: 150px;
   11   height: 150px;
   12   background-color: #f00;
   13 }
   14 #father{
   15   width: 100px;
   16   height: 100px;
   17   background-color: #0f0;
   18 }
   19 #son{
   20   width: 50px;
   21   height: 50px;
   22   background-color: #00f;
   23 }
   24 #ancestor :hover{
   25   transform: rotate(45deg);
   26 }
   27 </style>

   View Code 2

   或許乍一看，感覺這段代碼和之前的那一段一模一樣，但是其實有一個很大的區別。
   相信拷貝代碼去嘗試過的小伙伴們，已經開始疑惑了。那就讓我開始來嗶嗶一波吧。
   其實仔細關註了這兩段代碼之後，可以發現區別實際是在 #ancestor:hover 這個選擇器上。第二段代碼只是多加了一個空格。
   很多同學肯定已經靈光一閃，仿佛已經明白了什麼。不過，還是我來提壺（醍醐）給大家灌個頂吧！

4. 發生了什麼：
   大家都知道選擇器中，空格就是後代選擇器。#ancestor :hover 所命中的，其實就是 #ancestor 所有後代元素的 :hover 屬性。所以在 #ancestor 自身上。沒有被添加到這個偽類，而 #father 、#son，被同時命中。就出現了大家所看到的效果。如果，想印證我的說法，可以使用 #ancestor>:hover 再做一次嘗試. 或者再次添加更多的後代元素.看看他們是否一樣有這個特殊效果。
   至於我們最通常使用的 #ancestor:hover 這一種使用的方式，實際上就是兩個選擇器組成的交集選擇器，需要同時命中這兩個條件才被適用。
   故而，我這一堆嗶嗶，也就是為了表明偽類、偽元素選擇器，其實和我們使用的id選擇器、類選擇器等等常見的選擇器一樣，可以使用各種關係符，來組成各種奇怪而又好用的選擇器。
   
   
5. 這一堆嗶嗶，換來的實用性：
   很多人這個時候已經在吐槽了。偽類，只有在一些特殊的場景之下才會使用到，並不會很常用。
   我想說的是，偽類，並不僅僅是 :link:，:vistited，:hover，:active 等特殊狀態的。
   還有一些，比如:first-child，:last-child，:nth-child 這些指向特定元素的。
   在我們使用這些偽類時，例如 li:first-child ，會命中的是 li 標簽，同時必須是他自身父級的第一個元素。所以，很多人都會加上一個類名來實現給他的效果。
   但是，如果我們這樣寫呢。 ul > :first-child  是不是就會顯的更有語義且優雅。
   亦或者，ul > ::before  給所有的子集中增加一個小箭頭

後話，嗶嗶了這麼久。其實實用性確實不是很高。我做這一篇隨筆主要意義是，希望新手能正常理解，偽類、偽元素，到底是一個什麼樣的東西。其實它們並不特殊，和普通的選擇器是一模一樣的。不需要用特殊的眼光去看待他們。也不需要覺得它們有什麼特別的用法。將他們看成普通的選擇器，只不過他們命中的元素是一種特殊狀態。記住這一點就好。

至：所有對偽類，偽元素持懵逼狀態的各位。