笙亿网络策划

CSS 群组选择器怎么用？分组选择器语法和示例有哪些？

约 3 分钟读完 39 阅
文章导读
Previous Quiz Next CSS 中的组选择器 CSS 组选择器可以同时为多个元素应用相同的样式。元素名称可以用逗号分隔。组选择器使 CSS 更简洁，避免了冗余。
📋 目录
  1. 一 CSS 中的组选择器
  2. 二 语法
  3. 三 CSS 组选择器示例
  4. 四 结合伪类的组选择器示例
A A

CSS - 组选择器

Previous
Quiz
Next

CSS 中的组选择器

CSS 组选择器可以同时为多个元素应用相同的样式。元素名称可以用逗号分隔。组选择器使 CSS 更简洁，避免了冗余。

语法

CSS 组选择器的语法如下：

#selector_1, .selector_2, selector_3 {
    /* 属性: 值; */
    color: #04af2f
}

CSS 组选择器示例

在这个示例中，我们使用组选择器为所有三个元素应用了相同的样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        span, #para, .myClass {
            background-color: #04af2f;
            color: white;
        }
    </style>
</head>
<body>
    <p id="para">This is a paragraph element.</p>
    <div class="myClass">This is a div element.</div>
    <br>
    <span>This is a span element.</span>
</body>
</html>

结合伪类的组选择器示例

在这个示例中，我们将伪类与组选择器结合使用。CSS :active 伪类在点击时更改链接和按钮的文本颜色，而 CSS :hover 伪类更改 div 和 p 元素的 background-color。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .link:active, #btn:active {
            color: #04af2f;
        }

        .myDiv:hover, #para:hover {
            background-color: #031926;
            color: white;
        }
    </style>
</head>
<body>
    <div class="myDiv">
        Hover over me
    </div>
    <p id="para">This is a paragraph.</p>
    <a class="link" href="#">Click on this link.</a>
    <br><br>
    <button id="btn">Click me</button>
</body>
</html>