一文教你玩转CSS 组合选择器

CSS组合选择器是CSS选择器的一种，它使用多个简单选择器组合在一起，以选择特定元素。在CSS设计中，组合选择器可以让我们更灵活高效地选择页面元素进行样式设置。

基础语法

组合选择器可以使用空格、大于号、加号等符号来组合多个简单选择器，常见的符号组合如下：

• 空格 (空格表示选择器之间的任意下一级元素)
• 大于号 (> 表示选择器之间的直接下一级元素)
• 加号 (+ 表示选择器之间相邻的下一级元素)
• 逗号 (, 表示把多个选择器组合在一起)

组合选择器的基本语法如下：

selector1 selector2 {
    /* 样式代码块 */
}

selector1和selector2都是简单选择器，它们通过空格、大于号、加号等符号连接在一起，表示选择匹配selector1的元素下的所有匹配selector2的元素。

组合选择器示例1：父元素div下的直接子元素p进行样式设置

<div>
    <p>段落1</p>
    <p>段落2</p>
    <span>这是一个span元素</span>
    <p>段落3</p>
</div>

div>p {
    background-color: yellow;
}

上述代码将会选择<div>元素下的所有直接子元素中的<p>元素进行样式设置，从而实现<p>元素背景色为黄色。

组合选择器示例2：并集选择器

CSS的并集选择器可以通过多个选择器一起组合来实现。通过逗号分隔多个选择器，表示选中不同选择器匹配的所有元素。

<div>
    <p class="selected">段落1</p>
    <p class="selected">段落2</p>
    <span>这是一个span元素</span>
    <p>段落3</p>
</div>

p.selected, span {
    color: red;
}

上述代码展示了一个并集选择器的例子，它同时选中了所有class属性为selected的<p>元素和所有<span>元素，设置它们的颜色为红色。

总之，在CSS的世界里，组合选择器的使用可以极大提高我们CSS样式的设置效率，熟练掌握它们是CSS编写的必备技能之一。