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选择器参考手册