那些被遺忘的選擇器

在IE6~8“統治”網路世界的時代，CSS2版本曾經推出過幾種選擇器，而這幾種選擇器由於對IE6支援程度較差，使得前端開發工程師不得不將其捨棄。而今，IE6已逝，趕緊把這些方便快捷的選擇器用在日常的開發當中吧！

• 偽類選擇器 :first-child
• 子代選擇器 .wrap > p
• 毗鄰選擇器 .con + p

偽類選擇器 :first-child

說到:first-child，很多人會聯想到:last-child，但是請務必注意：:first-child和:last-child並非“師出同門”。

:first-child是CSS2版本時代提出的偽類選擇器，得到了IE7及IE7以上的各個主流瀏覽器的支援；

:last-child是CSS3版本時代提出的偽類選擇器，得到了IE9及IE9以上的各個主流瀏覽器的支援。

當IE6逝去，IE8還“苟延殘喘”之時，:last-child這種CSS3選擇器還不能夠在PC平臺施展拳腳。

:first-child的主要用途

替代傳統的margin負值應用，解決“多個類似標籤中，只有某個標籤的邊框或邊距與其他不同”的需求。

:first-child的應用場景

:first-child程式碼例項

如上第一個場景的樣式與結構程式碼：

<style>
    .con {
        padding: 20px;
        border: 1px solid black;
    }
    .con div {
        height: 50px;
        border-top: 2px dashed red;
        line-height: 50px;
    }
    .con div:first-child {
        border: none;
    }
</style>
<div class="con">
    <div>HTML5學堂</div>
    <div>原來技術可以通俗易懂</div>
    <div>每週一週四與您分享技術文章</div>
    <div>不定期更新“學堂閒談”</div>
</div>
 

如上第二個場景的樣式與結構程式碼：

<style>
    .box {
        width: 340px;
        border: 1px solid red;
    }
    .box div {
        float: left;
        width: 100px;
        height: 100px;
        margin-left: 20px;
        background: #39f;
    }
    .box div:first-child {
        margin: 0;
    }
</style>
<div class="box clearfix">
    <div>:first-child</div>
    <div>便捷的偽類選擇器</div>
    <div>快快用起來</div>
</div>
 

子代選擇器 >

子代選擇器也是使用多個選擇器的組合來找到要控制的標籤，不同的選擇器之間使用大於號“>”分隔。整體的原理與後代選擇器類似，所不同的是，子代選擇器僅僅選擇到的是一代，而非所有後代。得到了IE7及IE7以上的各個主流瀏覽器的支援。

子代選擇器基本語法

1. 選擇器名1 > 選擇器名2 > … > 選擇器名n {
2. 屬性名: 屬性值;
3. 屬性名: 屬性值;
4. }

子代選擇器的主要用途

起名字一直都是前端開發工程師的煩心事，子代選擇器能夠幫我們減少程式碼中的類名數量，同時，標籤選擇時的部分情況下，不需要刻意規避一些標籤，選擇起來更靈活。

子代選擇器的應用場景

不採用子元素選擇器時的結構程式碼

<div class="arc">
    <h1 class="tit"></h1>
    <p class="inf"></p>
    <div class="con">
        <h1></h1>
        <p></p>
        <h2></h2>
        <p></p>
    </div>
</div>

當不採用子元素選擇器時，要考慮選擇器的控制範圍，由於在內容區域（類名為con的div）當中，會在此有可能出現h1~h6、p、ul、ol、div等各類標籤，因此，針對“文章大標題”、“文字資訊”以及“文章內容包含框”幾個元素，就必須單獨起類名，進行控制，使用“.arc .tit”“.arc .con”等後代選擇器進行樣式控制。

採用子元素選擇器時的結構程式碼

<div class="arc">
    <h1></h1>
    <p></p>
    <div>
        <h1></h1>
        <p></p>
        <h2></h2>
        <p></p>
    </div>
</div>

當採用子代選擇器的時候，類名為arc的div當中，第一層標籤和第二層標籤的樣式，就可以進行單獨控制，此時如果希望控制如上程式碼中第二級別的標籤樣式，只需要使用“.arc > h1”、“.arc > p”、“.arc > div”等選擇器。如果希望控制第三級別甚至第四級別的標籤樣式，可以使用“.arc > div p”此類選擇器來實現。

毗鄰選擇器 +

毗鄰選擇器，也稱為相鄰選擇器。使用 + 號連線兩個選擇器。用於選擇當前標籤的下一個兄弟級元素。得到了IE7及IE7以上的各個主流瀏覽器的支援。

+（毗鄰）與~（兄弟）

提到+（毗鄰選擇器），對CSS3比較熟悉的工程師有可能會想到~（通用兄弟選擇器）。通用兄弟元素選擇器是CSS3新增加的一種選擇器，得到了IE9及IE9以上的各個主流瀏覽器支援。與毗鄰選擇器類似的地方在於：需要在同一個父元素之中。與毗鄰選擇器不同的地方在於：這種選擇器將選擇某元素後面的所有兄弟元素。

兄弟選擇器語法

1. E ~ F {/* 樣式程式碼 */}

程式碼含義：匹配任何在E元素之後的同級F元素。

毗鄰選擇器的主要用途

相對:first-child和子選擇器而言，毗鄰選擇器的使用場景比較少，可以利用該選擇器來減少類名的設定。內容較多的列表部分可以使用該選擇器。

毗鄰選擇器應用場景

如果不採用毗鄰選擇器，對於“文章分類、釋出時間”、“作者、閱讀量”這兩行，就需要通過類名進行區分，例如如下結構：

<div class="arc">
    <h1><a href="" title=""></a></h1>
    <div class="kinds"><span></span><span></span></div>
    <p></p>
    <div class="author"><span></span><span></span></div>    
</div>

如果採用毗鄰選擇器，可以調整為如下結構：

<div class="arc">
    <h1><a href="" title=""></a></h1>
    <div><span></span><span></span></div>
    <p></p>
    <div><span></span><span></span></div>    
</div>

對於第一個div，可以使用“.arc > h1 + div”選擇器選取，對於第二個div，可以使用“.arc > p + div”這個選擇器選取。

好啦，幾種選擇器介紹完了，趕緊在自己的開發當中把它用起來吧~！