CSS 逗号选择器

"逗号选择器" 自创术语,该用法里有逗号,其他地方有其他叫法,如:并集选择器、分组选择器、等。


1 语法

选择器1 , 选择器2, …选择器n{
  样式内容
}

多个选择器用逗号隔开。

表示这多个选择器都有这个样式。

每个选择器可以是基本选择器,或其它高级选择器。

原始等价写法

选择器1 {
  样式内容
}
选择器2 {
  样式内容
}
…
选择器n {
  样式内容
}

同样的样式内容要写n遍,重复;通过逗号选择器进行简化。


2 示例

html代码

    <div>
        <h3>标题1</h3>
        <p class="class1">第1段</p>
        <p class="class1">第2段</p>
        <p>第3段</p>
        
        <span id="span1">关关教程</span><br>
        <span >tuto.dushare.cn</span><br>
        
    </div>

需求

将h3标签、class=class1、id=span1的所有元素设置红色、粗体。

img

实现

         h3,.class1,#span1{
            color: #f00;
            font-weight: 600;
        }