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，所以此处为： <style> p { color: blue; } #bolder-line </style> 最后，为id选择器设置样式规则，同样使用大括号包裹： <style> p { color: blue; } #bolder-line { font-weight: bolder; } </style> 所以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的标签，即第三个段落，所以该段落文字加粗。 最终效果如下： 5. 小结 元素选择器应用于某类元素的所有标签，id选择器应用于指定id的一个标签。 这两种标签写法的区分是，元素选择器直接写元素名，而id选择器写#后面跟着id。
