选择器挑战

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

挑战

简单

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

使用类型选择器编写一条 CSS 规则，选择所有 <p> 元素。将文本颜色设置为蓝色，字体大小设置为 16 像素。
为 <h2> 元素和 <div> 元素添加 class 属性，并将其值设为 "highlight"。
使用类选择器编写一条 CSS 规则，选择所有类名为 "highlight" 的元素。将背景颜色设置为黄色。
为 <ul> 元素添加 id 属性，并将其值设为 "special"。
使用ID 选择器编写一条 CSS 规则，选择 ID 为 "special" 的元素。将背景颜色设置为浅灰色，字体大小设置为 20 像素。
使用分组选择器编写一条 CSS 规则，选择所有 <h1> 和 <li> 元素。将文本颜色设置为红色。

亲手试试

<html>
<head>
    <title>Selection Challenge</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>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>