Menu
CoddyTech

选择器简介

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

在 CSS 中,选择器是用于选中你想要设置样式的 HTML 元素的模式。它们是 CSS 规则的重要组成部分,因为它们决定了样式将应用于哪些元素。

选择器有多种类型,每种选择器定位元素的方式都不同。理解选择器是掌握 CSS 并创建样式良好的网页的基础。

这是一个带有选择器的基本 CSS 规则:

selector {
    property: value;
}
  • selector:选择要设置样式的 HTML 元素。
  • property:你想要更改的样式属性(例如 color、font-size)。
  • value:你想为属性设置的值(例如 blue、16px)。

例如:

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

在这个示例中,p 是选择器,用于选中所有段落元素。声明将所有段落的文本颜色设为蓝色,字号设为 16 像素。

challenge icon

挑战

简单

给你一个 HTML 文档。使用内部 CSS 设置文档的样式,具体属性如下:

  1. 将所有 h1 标题的背景颜色设为 green。
  2. 将所有 h1 标题的文本颜色设为 white。
  3. 将所有段落(p)的字体大小设为 18px。

已为你提供初始 CSS 代码。

亲手试试

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
    <style>
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>John Doe</h1>
    <p>Web Developer</p>
</body>
</html>
quiz icon自我测试

这节课包含一个小测验。开始学习即可作答,并记录你的进度。

使用 CSS 添加样式中的所有课

自己练习: Web 在线编辑器