#书摘 #css #前端
《CSS 选择器世界》第5章 精通CSS选择符
CSS选择符可以让选择器有更丰富的层级关系，使我们从容应对各种相对复杂的样式布局。
CSS选择符目前有下面这几个：后代选择符——空格（ ）、子选择符——箭头(>)、相邻兄弟选择符——加号(+)、随后兄弟选择符——波浪线(~)和列选择符——双管道(||)。其中对于前4个选择符，浏览器开始支持的时间较早，非常实用，是本章的重点。最后的列选择符算是“新贵”，与Table等布局密切相关，但目前浏览器的兼容性还不足以使它被实际应用，因此只简单介绍。
1. 后代选择符——空格（ ）
后代选择符是非常常用的选择符，随手抓取一个线上的CSS文件就可以看到这个选择符，它从IE6时代就开始被支持了。
后代选择符以空格作为分隔符，从前往后的选择器，只要匹配DOM由外而内的层级关系，就会匹配最后一个选择器对应的元素。
> 早些年我拿这道题做测试，结果全军覆没，无人答对，大家都认为1和2的颜色分别为深蓝色和浅蓝色。实际上正确答案是，1和2全部都是深蓝色
当包含后代选择符的时候，整个选择器的优先级与祖先元素的DOM层级没有任何关系，这时要看落地元素的优先级。在本例中，落地元素就是最后的<p>元素。两个<p>元素彼此分离，非嵌套，因此DOM层级平行，没有先后之分。再看选择器的优先级，.lightblue p和.darkblue p出现了一个类选择器（数值10）和一个标签选择器（数值1），选择器优先级数值一样。此时就要看它们在CSS文件中的位置，遵循“后来居上”的规则，由于.darkblue p位置靠后，因此<p>都是按照color:darkblue进行颜色渲染的，于是，最终1和2的文字颜色都是深蓝色。
《CSS 选择器世界》第5章 精通CSS选择符
CSS选择符可以让选择器有更丰富的层级关系，使我们从容应对各种相对复杂的样式布局。
CSS选择符目前有下面这几个：后代选择符——空格（ ）、子选择符——箭头(>)、相邻兄弟选择符——加号(+)、随后兄弟选择符——波浪线(~)和列选择符——双管道(||)。其中对于前4个选择符，浏览器开始支持的时间较早，非常实用，是本章的重点。最后的列选择符算是“新贵”，与Table等布局密切相关，但目前浏览器的兼容性还不足以使它被实际应用，因此只简单介绍。
1. 后代选择符——空格（ ）
后代选择符是非常常用的选择符，随手抓取一个线上的CSS文件就可以看到这个选择符，它从IE6时代就开始被支持了。
后代选择符以空格作为分隔符，从前往后的选择器，只要匹配DOM由外而内的层级关系，就会匹配最后一个选择器对应的元素。
> 早些年我拿这道题做测试，结果全军覆没，无人答对，大家都认为1和2的颜色分别为深蓝色和浅蓝色。实际上正确答案是，1和2全部都是深蓝色
<div class="lightblue">
<div class="darkblue">
<p>1. 颜色是？</p>
</div>
</div>
<div class="darkblue">
<div class="lightblue">
<p>2. 颜色是？</p>
</div>
</div>
.lightblue p {
color: lightblue;
}
.darkblue p {
color: darkblue;
}
当包含后代选择符的时候，整个选择器的优先级与祖先元素的DOM层级没有任何关系，这时要看落地元素的优先级。在本例中，落地元素就是最后的<p>元素。两个<p>元素彼此分离，非嵌套，因此DOM层级平行，没有先后之分。再看选择器的优先级，.lightblue p和.darkblue p出现了一个类选择器（数值10）和一个标签选择器（数值1），选择器优先级数值一样。此时就要看它们在CSS文件中的位置，遵循“后来居上”的规则，由于.darkblue p位置靠后，因此<p>都是按照color:darkblue进行颜色渲染的，于是，最终1和2的文字颜色都是深蓝色。
