CSS選擇符常用的有這幾個，后代選擇符空格( )，子選擇符箭頭(>)，相鄰兄弟選擇符加號(+)，隨后兄弟選擇符波浪號(~)，本文主要介紹它們的區(qū)別和作用。

后代選擇符

后代選擇符 ( ) 是我們在前端開發(fā)中最常用的選擇符了，從IE6就開始支持了，但是我們真的了解它的作用嗎，先來看下面這個例子

<style>
    .red { color: red; }
    .blue { color: blue; }
</style>
<div class="red">
    <div class="blue">
        <p>1.文本文本文本</p>
    </div>
</div>

<div class="blue">
    <div class="red">
        <p>2.文本文本文本</p>
    </div>
</div>

這個應該比較簡單，第一段會顯示藍色，第二段會顯示紅色，因為 color 具有繼承性，所以文字顏色由最深的元素決定，結(jié)果如下圖所示：

后代選擇符例子1

再來看下面這個例子，將樣式稍微改一下

<style>
    .red p{ color: red; }
    .blue p{ color: blue; }
</style>
<div class="red">
    <div class="blue">
        <p>1.文本文本文本</p>
    </div>
</div>

<div class="blue">
    <div class="red">
        <p>2.文本文本文本</p>
    </div>
</div>

結(jié)果會是怎么樣的呢，相信很多人會答錯，包括我自己剛開始時也錯了，以為是藍色和紅色，其實正確答案是兩個都是藍色，如下圖所示：

后代選擇符例子2

會搞錯的原因主要就是對后代選擇符的認識不清晰，如果包含后代選擇符，那么整個選擇器的優(yōu)先級就與祖先元素的 DOM 層級沒有任何關系，而是要看落地元素的優(yōu)先級，上面的例子中，落地元素是 <p> ，兩個 <p> 元素彼此分離，沒有嵌套，所以它們的 DOM 層級平行；再看選擇器的優(yōu)先級，.red p 和 .blue p 是一個類選擇器（數(shù)值10）和一個標簽選擇器（數(shù)值1），它們的數(shù)值相等；此時就看它們在 CSS 中的位置，按照“后來居上”的規(guī)則，因為 .blue p 靠后，所以最終呈現(xiàn)的就是兩個都是藍色的。

子選擇符

子選擇符 (>) 在前端開發(fā)中也是比較常用到的，它從IE7開始支持。

• 子選擇符跟后代選擇符的區(qū)別

  子選擇符只會匹配第一代子元素，也就是它下面的子元素中最外層的元素，而后代選擇符會匹配所有的子元素，比如下面這個例子

<style>
    ol li { color: red; text-decoration: underline; }
    ol > li { color: blue; text-decoration: underline wavy; }
</style>
<ol>
    <li>文本文本文本</li>
    <li>文本文本文本
        <ul>
            <li>2.1文本文本文本</li>
            <li>2.1文本文本文本</li>
        </ul>
    </li>
    <li>文本文本文本</li>
</ol>

由于父子元素不同的 text-decoration 會不斷累加，所以我們可以根據(jù)下劃線的類型準確出不同選擇符的作用范圍，結(jié)果如下圖

子選擇符例子

可以看到最外層元素都是波浪線，而內(nèi)層元素即有波浪線也有直線，波浪線是由 ol > li 產(chǎn)生的，而直線則是由 ol li 產(chǎn)生的，說明 ol > li 只作用于最外層子元素，而 ol li 則作用于所有后代元素。

這就是這兩個選擇符的區(qū)別，可以看到后代選擇符 ( ) 的作用范圍比子選擇符 (>) 范圍更廣，因此同樣的選擇器下，子選擇符的匹配性能要優(yōu)于后代選擇符。

• 適合用子選擇符的場景

  用子選擇符的主要目的是避免沖突，防止影響其它元素，通過子選擇符進行限制從而使結(jié)構(gòu)更加穩(wěn)定，但同時也失去了彈性和變化，如果后續(xù)需要修改結(jié)構(gòu)的話可能會有影響。

相鄰兄弟選擇符

相鄰兄弟選擇符 (+) ，IE7及以上版本的瀏覽器支持，它用于選擇下一個相鄰的兄弟元素，來看下面這個例子

<style>
    .txt + p {
        color: red;
    }
</style>
<div>
    <p>1.文本文本</p>
    <p class="txt">2.文本文本</p>
    <p>3.文本文本</p>
    <p>4.文本文本</p>
</div>

結(jié)果如下圖所示：

相鄰兄弟選擇符例子

.txt 后面相鄰的 <p> 變成紅色了，這就是相鄰兄弟選擇符的作用。

我們可以使用相鄰兄弟選擇符來實現(xiàn)一些效果，比如實現(xiàn) :first-child 的效果，:first-child 也是我們經(jīng)常會用到的偽類，它是用來匹配某選擇器下的第一個元素，通常是在一些列表的第一行做一些特殊處理的時候會用到，但是它有個局限，比如匹配到的元素不是在容器里的第一個時就會無效，如果用相鄰兄弟選擇符來實現(xiàn)就不會有這個問題了因為它始終是匹配相鄰的下一個兄弟元素的，第一個絕不會匹配到。

隨后兄弟選擇符

隨后兄弟選擇符 (~) 也是IE7及以上版本的瀏覽器支持，它跟相鄰兄弟選擇符的區(qū)別是隨后兄弟選擇符匹配的是后面所有的兄弟元素，而不只是第一個，看下例子：

<style>
    .txt ~ p {
        color: red;
    }
</style>
<div>
    <p>1.文本文本</p>
    <p class="txt">2.文本文本</p>
    <p>3.文本文本</p>
    <p>4.文本文本</p>
</div>

結(jié)果如下圖所示：

隨后兄弟選擇符例子

可以看出隨后兄弟選擇符匹配的范圍比相鄰兄弟選擇符更廣。

總結(jié)

選擇符是我們在前端開發(fā)中會經(jīng)常用到的，通過了解它們的作用以及特性我們才能更好地運用到我們的項目中。

參考資料

• 《CSS選擇器世界》-張鑫旭 著