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