复合选择器#

使用场景#

当需要综合多个条件来给样式时使用，例如：

1
<div class="red">11</div>
2
<p class="red">11</p>

如果只想让 div 元素的字体变大，可以用交集选择器。

基本语法#

1
div.red {
2
    font-size: 20px;
3
}

作用#

• 相当于元素选择器和类选择器的复合
• 必须同时满足既是 div 又是 red 才可以使用这个样式

语法格式#

1
选择器1选择器2选择器3选择器4……

中间用 . 隔开，连着写。

重要注意事项#

如果交集选择器里存在元素选择器，必须以元素选择器开头。

基本语法#

1
选择器1, 选择器2 {
2
    color: red;
3
}

• 中间以逗号隔开

作用#

会选择出现的全部选择器。

高级用法#

在并集选择器里可以：

• 插入 ID 选择器
• 甚至可以写入交集选择器

示例#

1
#p, .p1, h1, span, div.red {
2
    font-weight: bold;
3
}