css交集选择器什么意思_css 复合选择器

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

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

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

什么是复合选择器？

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

后代选择器(包含选择器)

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

使用示例：

html：

我是孙子

我是儿子

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

.ancestor span {

font-size: 30px;

}

效果图：

写法总结：

祖先 后代 {

属性:属性值;

...

}

子元素选择器

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

使用示例：

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

html：

我是孙子

我是儿子

css：

.ancestor>span {

font-size: 30px;

}

效果图：

交集选择器

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

使用示例：

html：

我是div

我是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;

}