类选择器

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

类选择器用于根据 HTML 元素的 class 属性值来选择元素。你可以用它为文档中的多个元素应用相同的样式。当你想以相同的方式设置一组元素的样式，而不考虑它们的标签名称时，类选择器特别有用。

要在 CSS 中选择具有特定类的元素，你可以使用句点（.），后面跟着类名。以下是使用类选择器的基本语法：

.classname {
    property: value;
}

例如：

.highlight {
    background-color: yellow;
    color: black;
}

在这个示例中，类选择器 .highlight 会选中所有 class 为 "highlight" 的元素。这些元素的声明将背景颜色设为黄色，文本颜色设为黑色。

挑战

简单

给定一个包含各种元素的 HTML 文档，其中包括标题（<h1>、<h2>）、段落（<p>）和分区（<div>）。这些元素都还没有 class：先添加 class 属性，然后使用类选择器为这些元素设置样式。请按以下步骤操作：

为 <h1> 元素和第一个 <p> 元素添加 class 属性，值为 "blue-text"。
为 <h2> 元素和第二个 <p> 元素添加 class 属性，值为 "large-text"。
使用类选择器编写一条 CSS 规则，选中所有 class 为 "blue-text" 的元素。将这些元素的文字颜色设为蓝色。
使用类选择器编写一条 CSS 规则，选中所有 class 为 "large-text" 的元素。将这些元素的字号设为 24 像素。

亲手试试

<html>
<head>
    <title>Class Selector</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>
    <p>This is another paragraph.</p>
    <div>This is a division.</div>
</body>
</html>