点此查看 所有教程、项目、源码导航

本文目录

  • 1. 前言
  • 2. id选择器
  • 3. 使用id选择器
  • 4. 整体网页解析
  • 5. 小结

1. 前言

上一篇介绍了元素选择的使用，本篇来介绍一种新的选择器：id选择器。

我们先来说一下使用场景，如下面的代码中，所有诗句颜色都是蓝色。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>黄河远上白云间</p>
    <p>一片孤城万仞山</p>
    <p>羌笛何须怨杨柳</p>
    <p>春风不度玉门关</p>
</body>
</html>

此时我们如果觉得第三句“羌笛何须怨杨柳”，是最精彩的一句，我们希望让该句加粗显示，那么如何做到呢。

2. id选择器

id选择器，就是应用于选择一个指定元素的。在上面的场景中，我们希望针对性的选择第三个p标签，所以我们就可以给第三个p标签指定一个id，然后使用id选择器选择这个标签。

那么什么是id呢。就好比每个人都有一个唯一的身份证号，每个学生都有唯一的一个学号。id就是网页标签的唯一标识符，我们可以根据需要给标签添加id。

3. 使用id选择器

接下来，我们使用id选择器，给第三句诗设置样式。

首先，给第三句诗所在标签设置id为key-line。此处注意id的名称可以按照程序员的喜好设定，但是一般是要有一定含义的，以便于我们理解代码含义，此处key-line表示"关键的一行"。

	<p>黄河远上白云间</p>
    <p>一片孤城万仞山</p>
    <p id="key-line">羌笛何须怨杨柳</p>
    <p>春风不度玉门关</p>

然后，在style区域编写id选择器，注意id选择器的格式为#xxx，其中#表示按id选择，xxx为被选择的id，所以此处为：

 	<style>
        p {
            color: blue;
        }

        #key-line
    </style>

最后，为id选择器设置样式规则，同样使用大括号包裹：

	<style>
        p {
            color: blue;
        }

        #key-line {
            font-weight: bolder;
        }
    </style>

所以font-weight: bolder;就被应用到id等于key-line的标签上了。

4. 整体网页解析

整体网页代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        p {
            color: blue;
        }
        #key-line {
            font-weight: bolder;
        }
    </style>
</head>
<body>
    <p>黄河远上白云间</p>
    <p>一片孤城万仞山</p>
    <p id="key-line">羌笛何须怨杨柳</p>
    <p>春风不度玉门关</p>
</body>
</html>

首先是p选择器，其样式color:blue;会应用于所有p标签，所以所有段落都是蓝色的。

然后是#key-line选择器，其样式font-weight: bolder;会应用于id等于key-line的标签，即第三个段落，所以该段落文字加粗。

最终效果如下：

5. 小结

元素选择器应用于某类元素的所有标签，id选择器应用于指定id的一个标签。

这两种标签写法的区分是，元素选择器直接写元素名，而id选择器写#后面跟着id。

更多推荐

零基础CSS入门教程(8)–id选择器