JavaWeb学习之路(30)–CSS之id选择器使用详解

短命女 2022-09-16 06:13 195阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  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，如下：

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

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

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

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

# 4. 整体网页解析 #

整体网页代码如下：

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

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

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

最终效果如下：  
![在这里插入图片描述][0eda3cde5e804c858e38a8147eb1bfb4.png]

# 5. 小结 #

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

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

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[0eda3cde5e804c858e38a8147eb1bfb4.png]: /images/20220828/d8ca3a2f5ff64014b129d372edbfb962.png