Web前端基础（七）：CSS选择器进阶

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等等。