分组选择器

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 14 课，共 76 课。

分组选择器用于选择多个 HTML 元素，并为它们应用相同的样式。当你想为不同的元素应用一组通用样式，又不想为每个元素分别编写规则时，这种方式特别有用。通过对选择器进行分组，你可以编写更简洁、更高效的 CSS 代码。

要使用分组选择器，请列出要分组的选择器，并用逗号（,）分隔。基本语法如下：

selector1, selector2, selector3 {
    property: value;
}

例如，假设你想为所有 <h1>、<h2> 和 <p> 元素应用相同的文本颜色和字号。你可以像这样使用分组选择器：

h1, h2, p {
    color: blue;
    font-size: 16px;
}

在这个示例中，组选择器会选中所有 <h1>、<h2> 和 <p> 元素。声明会将这些元素的文本颜色设为蓝色，字体大小设为 16 像素。

你可以将任何类型的选择器组合在一起，包括类型选择器、类选择器和 ID 选择器：

h1, .highlight, #intro {
    background-color: yellow;
}

挑战

简单

给定一个包含多个元素的 HTML 文档，其中包括标题（<h1>、<h2>）、段落（<p>）和一个分区（<div>）。你的任务是使用组选择器为这些元素设置样式。请按以下步骤操作：

编写一条使用组选择器的 CSS 规则，选中所有 <h1> 和 <h2> 元素。将这些元素的文本颜色设置为 red。
编写一条使用组选择器的 CSS 规则，选中所有 <p> 元素和 <div> 元素。将这些元素的背景颜色设置为 lightgray，字体大小设置为 18 像素。

亲手试试

<html>
<head>
    <title>Group Selectors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a main heading</h1>
    <h2>This is a subheading</h2>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>