多重选择器详细说明及案例

1. 多重选择器概述

多重选择器（Multiple Selectors）允许在CSS中同时选择多个元素，并将相同的样式规则应用于这些元素。通过使用逗号（,）将不同的选择器分隔开，可以实现这一功能。

2. 语法

selector1, selector2, selector3 {
    /* 样式规则 */
}

3. 案例

假设有以下HTML结构：

<h1>标题1</h1>
<p class="text">段落文本</p>
<p id="special">特殊段落</p>
<h2>标题2</h2>

我们希望将<h1>、<h2>和带有class="text"的<p>元素的字体颜色设置为红色。可以使用多重选择器实现：

h1, h2, .text {
    color: red;
}

4. 效果

  • <h1>和<h2>的字体颜色将变为红色。

  • 带有class="text"的<p>元素的字体颜色也将变为红色。

  • 带有id="special"的<p>元素不受影响，保持默认颜色。

5. 注意事项

  • 多重选择器可以组合不同类型的选择器（如标签选择器、类选择器、ID选择器等）。

  • 每个选择器之间必须用逗号分隔。

  • 样式规则将应用于所有匹配的元素。

本篇文章内容来源于：多重选择器详细说明以及案例