#书摘 #css #前端
《CSS 选择器世界》第5章 精通CSS选择符
2. 子选择符——箭头(>)
子选择符也是非常常用、重要的一个选择符，IE7浏览器开始支持，它和后代选择符有类似于“远房亲戚”的关系。子选择符只匹配第一代子元素，而后代选择符会匹配所有子元素。
子选择符是一把双刃剑，它通过限定关系使结构更加稳固，但同时失去了弹性和变化，需要审慎使用。
3. 相邻兄弟选择符——加号(+)
相邻兄弟选择符也是非常实用的选择符，它被IE7及以上版本的浏览器支持。它
可以用于选择相邻的兄弟元素，但只能选择后面一个兄弟元素。相邻兄弟选择符会忽略文本节点和注释节点，只认元素节点。
相邻兄弟选择符最有价值的应用还是配合诸多伪类以低成本实现很多实用的交互效果，它是众多高级选择器技术的核心。
- 场景1:用来实现类似:first-child伪类的效果。例如，我们希望除第一个列表以外的其他列表都有margin-top属性值，首先可以想到的就是:first-child，下面介绍另一种方法，那就是借助相邻兄弟选择符，如下：

.cs-li + .cs-li { margin-top: 1em; }​​



由于相邻兄弟选择符只能匹配后一个元素，因此第一个元素不会被匹配，于是自然而然实现了非首列表元素的匹配。
实际上，此方法的适用范围比:first-child更广一些，例如，当容器的第一个子元素并非.cs-li的时候，相邻兄弟选择符这个方法依然有效，而:first-child此时却无效了，因为没有任何.cs-li元素是第一个子元素了，也就无法匹配:first-child。

- 场景2:当我们聚焦输入框的时候，如果希望显示后面的提示文字，可以借助相邻兄弟选择符轻松实现 —— 把提示文字预先埋在输入框的后面，当触发focus行为时，提示文字即可显示。HTML和CSS代码分别如下：


用户名：<input><span class="cs-tips">不超过10个字符</span>

.cs-tips {
color: gray;

margin-left: 15px;

position: absolute;

visibility: hidden;
}
:focus + .cs-tips {

visibility: visible;
}​​



4. 随后兄弟选择符——波浪线(~)
随后兄弟选择符和相邻兄弟选择符的兼容性一致，都是从IE7浏览器开始支持的，可以放心使用。两者的实用性和重要程度也是类似的，它们的关系较近。
相邻兄弟选择符只会匹配它后面的第一个兄弟元素，而随后兄弟选择符会匹配它后面的所有兄弟元素。至于其他细节，两者是类似的，例如，随后兄弟选择符也会忽略文本节点和注释节点。
在CSS选择器世界中，并不存在前面兄弟选择符，但是我们在实际开发的时候，确实存在很多场景需要控制前面的兄弟元素，此时又该怎么办呢？

<h4 class="cs-h">标题</h4>
<p class="cs-li">列表内容</p>
.cs-h:has( + .cs-li) {
color: deepskyblue;
}​​



此时标题元素就是深天蓝色，虽然伪类的参数是相邻兄弟选择符，但是匹配的是前面的元素，详见9.4节。