点此查看 所有教程、项目、源码导航
本文目录
- 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选择器
发布评论