看看下面的标记代码：

1
2<html>
3  <head></head>
4  <body>
5    <h1>我是一个标题</h1>
6    <p class="info">一些重要信息</p>
7    <p id="warning">不要这样做！</p>
8    <p class="info">一些其他重要信息——真的吗？</p>
9    <p class="primary">基本文本</p>
10  </body>
11</html>

上面发生了什么？

如果你写过很多 HTML，那么上面的内容应该对你来说已经很清晰了。

不过还是简单解释一下吧：

第 4 行在页面中添加了一个 h1 标题。
第 5 行添加了一个带有 class 属性为 info 的段落。
第 6 行也添加了一个段落，这次使用的是 id 属性为 warning。
第 7 行也很直接，你能看懂吗？它表示“添加一个 class 为 info 的段落”。
第 8 行同样添加了一个段落，但它的 class 是 primary。

现在我们对这些内容达成一致了。在本节课结束时，你将把上述标记样式化成如下效果：

说实话，这看起来并不美观。但请相信我，这个过程中有很多基础知识点需要掌握。

没有学会走路，怎么能飞呢，对吧？

让我们先从 CSS 开始学习，很快就能飞起来了！

元素选择器

如果你查看上面布局所用的 HTML，会发现其中包含多个元素。

h1、body 和 p 都是元素。还记得如何选择并设置元素样式吗？下面是一个例子：

1
2body {
3  background-color: #ccc;
4}

上面的代码中，选择了 body 元素并设置了样式。body 可以替换成任意其他 HTML 元素。

接下来我们来看看 CSS 中的具体选择器。

类选择器

如果你还记得 HTML 的知识，一个类名可以被应用到多个元素上。

在本课开头的例子中，我们有以下代码：

1
2<p class="info">一些重要信息</p>
3<p class="info">一些其他重要信息——真的吗？</p>
4<p class="primary">基本文本</p>

在 CSS 中选择类的方式如下：

1
2.info {
3  color: white;
4}

看到了吗？

在类名前加上一个英文句点 . 即可选择该类。然后你可以随意设置选中类的样式。

这条声明 color: white 将应用于所有拥有 class="info" 的元素。

ID 选择器

与可以被多个元素共用的类不同，ID 是唯一对应于单个元素的。

那么在 CSS 中如何选择一个 ID 呢？

1
2#warning {
3  color: red;
4}

没错，就是这样。

在 ID 名称前加上井号 # 即可。

如果这些对你来说都是全新的，别担心。多练习几次，你就会熟练掌握了。

组合选择器

我们已经学会了如何单独选择元素、类和 ID。但如果想对两个不同的类应用相同的 CSS 样式，该怎么办？

比如，你希望 class 为 info 和 primary 的元素都拥有黑色背景色。

你的第一反应可能是这样写：

1
2.info {
3  background-color: black;
4}
5
6.primary {
7  background-color: black;
8}

没错，这样是可以的。但其实还有更高效的方法来组合多个选择器。

来看一下：

1
2.info,
3.primary {
4  background-color: black;
5}

只需在选择器之间添加一个逗号 ,，就可以将多个选择器组合在一起。如上所示。

练习

现在你已经理解了构成我们设计的代码结构。请看下面的示例：

现在动手用 CSS 重新美化这个页面。给类、元素和 ID 设置截然不同的样式。

1. 将 body 元素的背景色设为黑色
2. 将 h1 元素的颜色设为绿色
3. 给 class 为 info 和 primary 的元素分别设置颜色为绿色和白色
4. 将 id 为 warning 的元素颜色设为白色
5. 最后，将 class 为 info 和 primary 的元素组合起来，设置它们的背景色为蓝色

完成之后，给自己点个赞吧 😎😀

下节课见！