css 颜色选择器-零基础CSS入门教程（十）——分组选择器

bendan520 2023年8月30日 css 0

点击此处查看所有教程、项目、源码导航

本文目录

1. 序言

有时，我们想要将样式应用于多个元素。 如果按照前面的模式，我们只能通过id选择器/class选择器/元素选择器来一一设置元素的样式。

在本文中，我们介绍组选择器。 通过组选择器，我们可以一次性设置多个选择器对应元素的样式。

2.不要使用分组选择器

考虑以下代码：

<body>
    <h1>凉州词</h1>
    <h4>作者：王之涣</h4>
    <p>
        黄河远上白云间
    </p>
    <p>
        一片孤城万仞山
    </p>
    <p>
        羌笛何须怨杨柳
    </p>
    <p>
        春风不度玉门关
    </p>
</body>

如果我们希望标题、作者、诗歌都使用黑色文本，那么CSS代码如下：

		h1 {
            color: blue;
        }
        h4 {
            color: blue;
        }
        p {
            color: blue;
        }

写起来相当麻烦。

3.使用组选择器

如果使用分组选择器，我们可以使用冒号来分隔选择器，然后统一应用一些样式代码。

		h1,h4,p {
            color: blue;
        }

上面的代码意味着{color:blue;}同时应用于三个元素选择器，所以效果如下：

4. 混合分组选择器

分组选择器可以同时对id、元素选择器和类选择器进行分组，比如下面的例子：

<head>
    <meta charset="utf-8">
    <style>
        h1,
        h4,
        .blue-text,
        #blue-id {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>凉州词</h1>
    <h4>作者：王之涣</h4>
    <p class="blue-text">
        黄河远上白云间
    </p>
    <p>
        一片孤城万仞山
    </p>
    <p id="blue-id">
        羌笛何须怨杨柳
    </p>
    <p>
        春风不度玉门关
    </p>
</body>

我们的分组选择器也应用到了h1元素选择器、h4元素选择器、.blue-textclass选择器和#blue-idid选择器上，所以效果如下：

5. 总结

通过对选择器进行分组，我们编写CSS代码css 颜色选择器css 颜色选择器，可以灵活地应用到我们指定的多个选择器上，让我们变得更加灵活！