CSS選擇器優先級（一）

我們在給頁面中的標籤添加樣式時，很多時候會用到父標籤來設置子標籤中的樣式；
在這個時候，沒有深入理解CSS的程序媛們就不知如何是好了！

今天專門請教前端大牛幫我縷清楚了父子級選擇器的使用。

先來一段代碼：

<style type="text/css">
    .box{
        width: 200px;
        height: 200px;
        border:5px solid black;
    }
    .a,.b{
        width: 100px;
        height: 100px;
        border: 5px solid black;
        box-sizing: border-box;
    }
    .c,.d{
        width: 50px;
        height: 50px;
        border: 5px solid black;
        box-sizing: border-box;
    }

    /*以下爲三者爲我此次要重點解說的*/

    /* NO1. */
    .box,.box>:not(.a){
        border-color: red;
    }

    /* NO2. */
    .box :not(.a){
        border-color: red;
    }

    /* NO3. */
    .box,.box:not(.a){
        border-color: red;
    }
    /*需解說代碼結束*/

</style>

<div class="box">
    <div class="a">
        <div class="c">

        </div>
    </div>
    <div class="b">
        <div class="d">

        </div>
    </div>
</div>

1. 我不執行代碼中用註釋括起來的，運行結果如下：
   

2. NO1.的執行結果
   

3. NO2.的執行結果
   
4. NO3.的執行結果
   

由上邊的代碼的運行結果可以看出：

1、.box,.box>:not(.a) 指：設置box標籤及box兒子標籤中不包含class爲a的標籤
2、.box :not(.a)指：設置box標籤及box中不包含class爲a的所有子標籤（此處包括兒子，孫子標籤）
（注意：.box後邊有一個空格）

3、.box,.box:not(.a)指：設置box標籤本身中不包含a的所有標籤。如下代碼片：

<div class="box a"></div>
<div class="box b"></div>
<div class="box c"></div>
<div class="box d"></div>

若使用.box,.box:not(.a)選擇器設置樣式則<div class="box a"></div>的樣式不受影響

---

以上只簡單介紹了在使用過程混淆的選擇器的使用；
更多選擇器的使用可以參考以下鏈接去查看API。CSS選擇器參考手冊