上一节给日期上样式时，span { color: #b2b2b2; } 里的 span 就是选择器。这一篇把它讲透：页面元素那么多，样式到底怎么"点"到你要改的那一个身上。
选择器的作用
CSS 选择器是用来选取需要设置样式的元素（标签）的。
写样式的套路永远是两步：
选择器 { /* ① 选谁 */
属性: 值; /* ② 改成什么样 */
}- 选择器：先"点名"，选出页面上要改的元素；
- 声明块：给选中的元素加上一条条属性。
名点得越准，样式就越不会"误伤"别的元素——这就是这一篇要练的手感。
六类选择器
PPT 给了一张完整的选择器表：
| 选择器 | 写法 | 示例 | 示例说明 |
|---|---|---|---|
| 元素选择器 | 元素名称 {...} | h1 {...} | 选择页面上所有的 <h1> 标签 |
| 类选择器 | .class属性值 {...} | .cls {...} | 选择页面上所有 class 属性为 cls 的标签 |
| id 选择器 | #id属性值 {...} | #hid {...} | 选择页面上 id 属性为 hid 的标签 |
| 分组选择器 | 选择器1,选择器2 {...} | h1,h2 {...} | 选择页面上所有的 <h1> 和 <h2> 标签 |
| 属性选择器 | 元素名称[属性] {...} | input[type] {...} | 选择页面上有 type 属性的 <input> 标签 |
元素名称[属性名="值"] {...} | input[type="text"] {...} | 选择页面上 type 属性为 text 的 <input> 标签 | |
| 后代选择器 | 元素1 元素2 {...} | form input {...} | 选择 <form> 标签内的所有 <input> 标签 |
一行行对照着看，六类选择器各自的规则与对应的 HTML 长这样：
① 元素选择器——把页面上所有 <h2> 都变红：
<style>
h2 { color: red; } /* 页面上有几个 h2，就有几个被选中 */
</style>
<h2>所有 h2 都被选中</h2>② 类选择器——只选 class="cls" 的元素（可以有很多个，也可以挂在不同的标签上）：
<style>
.cls { color: #ff0000; } /* 注意开头有一个点 */
</style>
<p class="cls">class 为 cls 的段落</p>
<span class="cls">class 为 cls 的文字</span>③ id 选择器——只选 id="hid" 的那一个元素（一个页面里 id 不能重复）：
<style>
#hid { color: #b2b2b2; } /* 开头是井号 */
</style>
<span id="hid">id 为 hid 的元素</span>④ 分组选择器——一条规则同时点两拨元素，选择器之间用逗号隔开：
<style>
h1, h2 { color: #0000ff; } /* 所有 h1 和所有 h2 一起改 */
</style>⑤ 属性选择器——按"有没有某个属性 / 属性等不等于某个值"来选（表单里特别常用）：
<style>
input[type] { color: red; } /* 只要写了 type 属性的 input 都选中 */
input[type="text"] { color: gray; } /* 只选 type 等于 text 的 input */
</style>⑥ 后代选择器——只选"某个祖先里面的"元素，两个选择器之间用空格隔开：
<style>
form input { color: red; } /* 只改 form 里面的 input，页面别处的 input 不动 */
</style>TIP
分清两个"分隔符"：逗号是"分组"（各选各的，一起应用同一条规则），空格是"后代"（先找到前一个，再在它里面找后一个）。h1,h2 是选所有 h1 和 h2；h1 h2 是选"h1 里面的 h2"。
最常用的三类：元素、类、id
PPT 专门用一页提问"最为常见的三类选择器的写法"，因为它们占了日常写样式的绝大多数：
| 选择器 | 写法 | 例子 | 特点 |
|---|---|---|---|
| 元素选择器 | 标签名 {...} | span {...} | 一网打尽，页面上所有该标签都改 |
| 类选择器 | .class属性值 {...} | .cls {...} | 谁加了 class="cls" 谁被选中，可复用（多个元素共用一套样式） |
| id 选择器 | #id属性值 {...} | #time {...} | 精准到唯一的一个元素（id 在一个页面里不能重复） |
用哪个取决于"要改几个元素"：
- 全都要改 → 元素选择器（最省事）；
- 一批同类元素都要改 → 类选择器（比如所有"日期"都变灰）；
- 就要改某一个 → id 选择器（比如全页面只有一处的标题）。
案例实战：给标题区挑元素
标题区里要改的就是那行日期。课程文件 05. 央视新闻-标题-样式(选择器).html 把上一节的元素选择器换成了 id 选择器：
<head>
<style>
/* 元素选择器 */
/* span {
color: #b2b2b2;
} */
/* 类选择器 */
/* .cls {
color: #ff0000;
} */
/* ID选择器 */
#time {
color: #b2b2b2;
}
a {
/* 去除超链接下方的下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<!-- 定义一个标题, 标题内容: 【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章 -->
<h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
<!-- 定义一个超链接, 里面展示 央视网 -->
<a href="https://www.cctv.com" target="_blank">央视网</a>
<!-- 日期：同时挂了 class 和 id，方便用不同方式选中它 -->
<span class="cls" id="time">2024年05月15日 20:07</span>
</body>
图：#time 选中的就是这一行日期（<span> 里的内容），而 a 选中了"央视网"这个链接
这段代码里有三个值得注意的地方：
#time比span更精准：span会改掉页面上所有<span>，#time只改挂了id="time"的那一个。元素上同时写了class="cls"和id="time"，就是留给不同选择器点的——class负责"一批"，id负责"唯一"。a { text-decoration: none; }是元素选择器：把页面上所有超链接下面的下划线去掉，让"央视网"看起来像正文的一部分——这是我们第一次给"选中元素"写新属性（text-decoration管文字修饰线）。- 注释掉的规则不是废话：
span、.cls两条留着，换一种选法只要把注释放开——这也说明同一条样式可以用不同选择器来写。
IMPORTANT
class 和 id 都不是给用户看的，而是给"选择器"用的"门牌号"。所以先把名字挂在标签上（class="cls" id="time"），再用选择器按名字找它（.cls / #time）。
优先级：谁说了算
同一个元素被多条规则命中时，优先级高的赢。PPT 给的顺序：
优先级：id 选择器 → 类选择器 → 元素选择器
也就是说 #time 的规则会盖过 .cls 的规则，.cls 的规则会盖过 span 的规则。在案例里把三种都放开，最后生效的一定是 #time 那条。
两条补充规则（PPT 没展开，写代码时会碰到）：
- 优先级相同时，写在后面的覆盖写在前面的——这就是"层叠样式表"里"层叠"的意思；
- 行内样式（写在标签
style属性上的那种，见 06 篇）优先级比上面这些选择器都高：它是直接贴在元素身上的，选择器再精准也盖不过它。
TIP
优先级冲突是"样式怎么不生效"的头号原因。排查顺序：先看有没有更高优先级的规则赢了（浏览器开发者工具里被划掉的样式就是被覆盖的），再检查属性名拼写和分号。
选择器命名建议
选择器写起来容易，起名才是长期成本。工程里通行的做法：
- 用英文、全小写，多个单词用连字符连接（
news-title、news-date），别用中文、空格、数字开头； - 见名知义，描述"是什么"而不是"长什么样"——
news-date好过gray-text（颜色以后可能会改，名字就过期了）； - 类名可以复用，多个元素、甚至同一个元素都可以有多个类名（
class="news-date important"，用空格隔开）； - id 在一个页面里必须唯一：它既是选择器的门牌号，也是后面 JavaScript 找元素的抓手。
小结
| 要点 | 内容 |
|---|---|
| 选择器的作用 | 选取需要设置样式的元素（标签），写法是 选择器 { 属性: 值; } |
| 六类选择器 | 元素（h1）、类（.cls）、id（#hid）、分组（h1,h2）、属性（input[type="text"]）、后代（form input） |
| 最常用三类 | 元素选择器：标签名 {...}；类选择器：.class属性值 {...}；id 选择器：#id属性值 {...} |
| 优先级 | id 选择器 → 类选择器 → 元素选择器；优先级相同时后写的生效；行内样式优先级最高 |
| 案例里的用法 | #time 选中日期（唯一）、a 选中所有超链接去掉下划线 |
相关
练习题
一、知识回顾（读完直接做下面的实践题）
- CSS 选择器是用来选取需要设置样式的元素（标签）的；样式规则的标准写法是
选择器 { 属性: 值; } - 元素选择器：写法
元素名称 {...}，示例h1 {...}——选择页面上所有的<h1>标签 - 类选择器：写法
.class属性值 {...}，示例.cls {...}——选择页面上所有class属性为cls的标签，可以复用（多个元素共用一套样式） - id 选择器：写法
#id属性值 {...}，示例#hid {...}——选择页面上id属性为hid的那一个标签（id 在页面里必须唯一） - 分组选择器：写法
选择器1,选择器2 {...}，示例h1,h2 {...}——选择页面上所有的<h1>和<h2>标签（用逗号分隔） - 属性选择器：写法
元素名称[属性] {...}（如input[type]，选有type属性的<input>）和元素名称[属性名="值"] {...}（如input[type="text"]，选type属性为text的<input>） - 后代选择器：写法
元素1 元素2 {...}，示例form input {...}——选择<form>标签内的所有<input>标签（两个选择器之间用空格分隔） - 优先级：id 选择器 → 类选择器 → 元素选择器；优先级相同时，写在后面的覆盖写在前面的；行内样式（标签
style属性）的优先级比这些选择器都高 - 最常用的三类选择器写法：元素选择器
标签名 {...}、类选择器.class属性值 {...}、id 选择器#id属性值 {...} - 案例里的两条规则：
#time { color: #b2b2b2; }把唯一的日期调成浅灰；a { text-decoration: none; }把页面上所有超链接的下划线去掉
二、裸写题
- 提示（先自己想，实在想不出再点开）
一级 · 思路：好几个同类元素要一起改——这是"元素选择器"最擅长的场景 二级 · 方法：元素选择器写标签名；去掉文字修饰线用属性
text-decoration，值none三级 · 骨架：____ { text-decoration: ____; }- 参考答案（做完再点开）
css/* 元素选择器：页面上所有超链接 */ a { /* 去除超链接下方的下划线 */ text-decoration: none; }对照课程
05. 央视新闻-标题-样式(选择器).html：这里就是把a { text-decoration: none; }抄了一遍。它选的是页面上所有<a>——正合需求。- 第一条摘要的文字用深蓝
- 第二条摘要用深红
- 两条规则的名字要能看懂是干什么的，而且以后再加摘要时可以直接复用 （练习文件
test_07_类选择器.html里有这两段摘要，样式写在 head 的样式区。）
- 提示（先自己想，实在想不出再点开）
一级 · 思路：要分别选中"两条不同的内容"——点一整类标签（元素选择器）会一起改，得给它们各自挂个名字 二级 · 方法：类选择器：
.class属性值 { ... }；名字用英文加连字符，如.news-blue（见名知义）；颜色可以用关键字、rgb 或十六进制 三级 · 骨架：.___ { color: ____; }/.___ { color: ____; }，同时要在标签上写class="____"- 参考答案（做完再点开）
html<style> /* 第一条摘要：深蓝 */ .news-a { color: #000080; } /* 第二条摘要：深红 */ .news-b { color: #800000; } </style> <body> <p class="news-a">第一条摘要……</p> <p class="news-b">第二条摘要……</p> </body>检查两点：① 两条规则不能都写同一个类名，否则后一条会覆盖前一条；② 标签上必须挂上对应的
class属性，只写 CSS 不写名字是选不中的。- 提示（先自己想，实在想不出再点开）
一级 · 思路：要"精准到唯一一个元素"——元素选择器会改一片，类选择器会改一批，只有一种选择器是唯一命中的 二级 · 方法：id 选择器：
#id属性值 {...}；先给那一处时间写id="time"三级 · 骨架：<标签 id="____">时间</标签>+#____ { color: #b2b2b2; }- 参考答案（做完再点开）
html<style> #time { color: #b2b2b2; } </style> <body> <!-- 只给这一处时间挂 id --> <span id="time">2024年05月15日 20:07</span> ... 另外两处保持原样 </body>对照课程
05. 央视新闻-标题-样式(选择器).html：案例里<span class="cls" id="time">就是这样做的。注意 id 一个页面只能出现一次——如果三处时间都要变灰，正确做法是给它们挂同一个class，用类选择器（.date { color: #b2b2b2; }）。- 提示（先自己想，实在想不出再点开）
一级 · 思路：两个都是同一种输入元素，靠"标签名"分不开；但它们身上有个属性不一样——这正是属性选择器要解决的 二级 · 方法：
元素名称[属性名="值"] { ... }，属性的值就是"单行文本"的类型名text三级 · 骨架：input[____="____"] { color: ____; }- 参考答案（做完再点开）
css/* 属性选择器：只选 type 属性为 text 的 input */ input[type="text"] { color: gray; }对照 PPT 的属性选择器示例
input[type="text"] {...}。补充：input[type]是"只要有 type 属性就选中"（两个输入框都会被选中），input[type="text"]才限定到具体值。
三、综合题
- 让页面上所有超链接都去掉下划线（一条规则）
- 把两处日期都调成浅灰
#b2b2b2，要求只写一条规则、名字可复用 - 只让正文区里的段落行高 2 倍、首行缩进 2 个字符；侧边栏里的段落不受影响
- 做完后想一想并动手验证：第 2 步那条规则和第 1 步的规则撞上同一个元素时，谁生效？把两条规则的顺序换一换，效果变不变？ （练习文件
test_07_综合_标题区样式.html里有页面内容与写作区。）
- 提示（先自己想，实在想不出再点开）
一级 · 思路：按"要改几个/在哪一片"来选选择器：全部→元素；一批同类→类；"某个区域里面的"→后代 二级 · 方法：
a { text-decoration: none; }；两处日期共用一个类名如.date { color: #b2b2b2; }；正文区用后代选择器.content p { line-height: 2; text-indent: 2em; }三级 · 骨架：____ { text-decoration: none; }/.____ { color: #b2b2b2; }/.____ ____ { line-height: ____; text-indent: ____em; }- 参考答案（做完再点开）
html<style> /* 1. 元素选择器：所有超链接去掉下划线 */ a { text-decoration: none; } /* 2. 类选择器：两处日期共用一套样式（名字见名知义、可复用） */ .date { color: #b2b2b2; } /* 3. 后代选择器：只选"正文区 div 里面"的段落 */ .content p { line-height: 2; text-indent: 2em; } </style> <body> <h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1> <a href="https://www.cctv.com" target="_blank">央视网</a> <span class="date">2024年05月15日 20:07</span> <div class="content"> <p>央视网消息（新闻联播）：……</p> <img src="img/1.gif" width="80%"> <p>行走在长江沿线，科研人员发现很多可喜现象。</p> </div> <div class="sidebar"> <p>侧边栏：相关阅读推荐。</p> </div> <span class="date">2026年09月29日 更新</span> </body>第 4 步的答案：
a是元素选择器、.date是类选择器，类选择器优先级更高——日期的规则不会被元素规则盖掉。把两条规则的顺序换一换不影响结果（优先级不同时，顺序不起作用；只有优先级相同时才是"后写的生效"）。