1、后代选择器
- 使用多个选择器的组合来找到要控制的标签;
- 类名为wrap中的div里面的span标签样式;
- 选择器直接用空格隔开。
/*样式如下:*/
.wrap div {
background-color: skyblue;
}
<!-- 结构如下: -->
<div class="wrap">
<div>01</div>
<div>02</div>
</div>
效果解释:
- 类名wrap的div内部两个子div都会有天蓝色背景
2、群组选择器
- 把不同选择器中的css取出,减少代码冗余;
- 选择器之间选择逗号隔开;
/*样式如下:*/
.wrap, .code {
background-color: skyblue;
}
<!-- 结构如下: -->
<div class="wrap">01</div>
<div class="code">02</div>
效果解释:
- 类名wrap的div和类名为code的div都会有天蓝色背景
3、毗邻选择器(X + Y)
- 它将只选择紧贴在X元素之后Y元素。下面的例子,仅每一个ul之后的第一个段落元素p的文本为红色;
/*样式如下:*/
ul + p {
color: red;
}
<!-- 结构如下: -->
<ul></ul>
<p></p>
<p></p>
4、兄弟选择器(X~Y)
- 兄弟选择符和毗邻选择器一样,只是它没有约束。
- 与毗邻选择符(ul + li)仅选择前一个选择符后面的第一个元素比起来,兄弟选择符更宽泛。它会选择,我们上面例子中跟在ul后面的任何p元素。
/*样式如下:*/
ul ~ p {
color: red;
}
<!-- 结构如下: -->
<ul></ul>
<p></p>
<p></p>
5、子代选择器(X > Y)
X Y(后代)和X > Y(子代)之间的不同点是后者只选择直接子代。例如,考虑如下的标记。
/*样式如下:*/
.container > ul {
background-color: skyblue;
}
<!-- 结构如下: -->
<div class="container">
<ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
</ul>
</div>
解析:
- 选择器.container > ul将只选择类名为container的div的直接子代ul;
- 不匹配更深层的li的子代的ul;
- 因此,使用子代选择符有性能上的优势。
6、关于兼容
- 后代、群组选择器兼容任何浏览器;
- 毗邻、兄弟、子代选择器兼容 IE7+ Firefox Chrome Safari Opera等等。