css 复合选择器

涉及到的选择器有：后代选择器，子元素选择器，交集选择器，并集选择器。

为什么要学习复合选择器?

• 更准确更精细地选择目标元素标签。

什么是复合选择器？

• 由两个或多个基础选择器，通过不同方式组合而成的。

后代选择器（包含选择器）

看后代这两个字，说明这个选择器是用来选择元素的子孙后代的。

使用示例：

html：

    <div class="ancestor">
        <div>
            <span>我是孙子</span>
        </div>
        <span>我是儿子</span>
    </div>

css：为ancestor类下的所有span标签设置字体大小为30px。

    .ancestor span {
        font-size: 30px;
    }

效果图：

写法总结：

祖先 后代 { 
	属性:属性值;
	...
}

---

子元素选择器

此选择器不同于后代选择器，它只能选择某元素的亲儿子。

使用示例：

对比后代选择器，html代码不变，css代码略有改变。

html：

    <div class="ancestor">
        <div>
            <span>我是孙子</span>
        </div>
        <span>我是儿子</span>
    </div>

css：

    .ancestor>span {
        font-size: 30px;
    }

效果图：

---

交集选择器

交集选择器 是 并且的意思。 即...又...的意思。

使用示例：

html：

    <div class="clazz1">我是div</div>
    <span class="clazz1">我是span</span>

思考：如何选择class属性值为clazz1的span标签？

css：

    span.clazz1 {/** span 和 .clazz1 中间没有空格 */
        color: red;
    }

效果图：

注意：

用的相对来说比较少，不太建议使用。

---

并集选择器

如果css样式重复定义，就可以使用并集选择器将重复代码抽取出来，让我们代码显得更加简洁。

例如：

.test1 {
    color: red;
    font-size: 30px;
}
.test2 {
    color: red;
    font-size: 25px;
}

可以看到test1和test1都定义了color: red;，这里的重复代码显得我们的代码特别臃肿，并且这些代码都需要我们自己手打重复敲，比较浪费时间，我们不如使用并集选择器，将重复代码抽取出来。这在重复代码量比较大的时候显得尤为重要。

.test1,
.test2 { /* 使用,分隔 */
    color: red;
}
.test1 {
    font-size: 30px;
}
.test2 {
    font-size: 25px;
}