7.复合选择器

之前我们提到过选择器由基础选择器与复合选择器构成，现在我们说一下复合选择器

复合选择器是将两个或更多个基础选择器复合到一起，这样选择起来更方便，复合选择器包含后代选择器，子选择器，并集选择器等，伪类选择器我会放到这个链接中单独介绍

https://blog.csdn.net/potato123232/article/details/126766587

目录

1  后代选择器

2  子选择器

3  并集选择器

4  交集选择器

---

1  后代选择器

后代选择器也叫包含选择器，它可以选择父元素里面的子元素

我们当前有一个有序列表与一个无需列表，里面都有若干项

我们现在想将ol中的li与ul中的li设置为不同的样式，那么我们应该这样写

效果是这样的

这个就是后代选择器，它的语法是这样的

元素1包含元素2，改的是元素2的样式，并不会动元素1的样式

元素1不一定直接包含元素2，间接包含元素2也可以，比如

这样它span中的内容就是黄色的

为了选择更加准确，我们也可以写多级

也是可以生效的

他也可以配合类选择器来使用，比如我们现在有两组几乎相同的ul

我现在想让第二个ul中的两个div自己搞一种样式，那么我们应该这样做

发现可以生效

2  子选择器

子选择器只选择最近一级的子元素，子元素选择器是这样的

• 同样只对元素2进行修改，元素1不进行修改

我们做一个例子

发现这样它只改变了第二个p，而没有改变第一个p

3  并集选择器

通常用于集体声明，比如我想让div和p的样式相同，我就可以用并集选择器，它的语法是这样的

• 改元素1，也改元素2

我们做个例子

这样他们的样式就是相同的

也可以和后代选择器混着用

• 注意最后一个元素不要加逗号，加了就用不了了

4  交集选择器

我当前有一个div与一个section标签，它们的类名相同，这个时候我们选择交集选择器可以将指定的元素选择处理

交集选择器的语法是两个基础选择器紧紧相连，同时满足条件的会被选择

• 可以加无数个条件，我就不做例子了