一、知识回顾（读完直接做下面的实践题）#

1. CSS 选择器是用来选取需要设置样式的元素（标签）的；样式规则的标准写法是 选择器 { 属性: 值; }
2. 元素选择器：写法 元素名称 {...}，示例 h1 {...}——选择页面上所有的 <h1> 标签
3. 类选择器：写法 .class属性值 {...}，示例 .cls {...}——选择页面上所有 class 属性为 cls 的标签，可以复用（多个元素共用一套样式）
4. id 选择器：写法 #id属性值 {...}，示例 #hid {...}——选择页面上 id 属性为 hid 的那一个标签（id 在页面里必须唯一）
5. 分组选择器：写法 选择器1,选择器2 {...}，示例 h1,h2 {...}——选择页面上所有的 <h1> 和 <h2> 标签（用逗号分隔）
6. 属性选择器：写法 元素名称[属性] {...}（如 input[type]，选有 type 属性的 <input>）和 元素名称[属性名="值"] {...}（如 input[type="text"]，选 type 属性为 text 的 <input>）
7. 后代选择器：写法 元素1 元素2 {...}，示例 form input {...}——选择 <form> 标签内的所有 <input> 标签（两个选择器之间用空格分隔）
8. 优先级：id 选择器 → 类选择器 → 元素选择器；优先级相同时，写在后面的覆盖写在前面的；行内样式（标签 style 属性）的优先级比这些选择器都高
9. 最常用的三类选择器写法：元素选择器 标签名 {...}、类选择器 .class属性值 {...}、id 选择器 #id属性值 {...}
10. 案例里的两条规则：#time { color: #b2b2b2; } 把唯一的日期调成浅灰；a { text-decoration: none; } 把页面上所有超链接的下划线去掉

二、裸写题#

• 2-1 让页面上所有链接都别带下划线 页面里有好几个跳转文字（可以点击的那种），要求一条规则把它们下面的那条横线全部去掉（不要在标签上一个个改）。 （练习文件 test_07_元素选择器.html 里已经给出页面内容，样式写在 head 的样式区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：好几个同类元素要一起改——这是”元素选择器”最擅长的场景 二级 · 方法：元素选择器写标签名；去掉文字修饰线用属性 text-decoration，值 none 三级 · 骨架：____ { text-decoration: ____; }

  参考答案（做完再点开）

  1
  /* 元素选择器：页面上所有超链接 */
  2
  a {
  3
    /* 去除超链接下方的下划线 */
  4
    text-decoration: none;
  5
  }

  对照课程 05. 央视新闻-标题-样式(选择器).html：这里就是把 a { text-decoration: none; } 抄了一遍。它选的是页面上所有 <a>——正合需求。

• 2-2 让两条不同的新闻摘要显示成两种颜色 页面里有两段新闻摘要，样式要求：

  1. 第一条摘要的文字用深蓝
  2. 第二条摘要用深红
  3. 两条规则的名字要能看懂是干什么的，而且以后再加摘要时可以直接复用 （练习文件 test_07_类选择器.html 里有这两段摘要，样式写在 head 的样式区。）
  提示（先自己想，实在想不出再点开）

  一级 · 思路：要分别选中”两条不同的内容”——点一整类标签（元素选择器）会一起改，得给它们各自挂个名字 二级 · 方法：类选择器：.class属性值 { ... }；名字用英文加连字符，如 .news-blue（见名知义）；颜色可以用关键字、rgb 或十六进制 三级 · 骨架：.___ { color: ____; } / .___ { color: ____; }，同时要在标签上写 class="____"

  参考答案（做完再点开）

  1
  <style>
  2
    /* 第一条摘要：深蓝 */
  3
    .news-a {
  4
      color: #000080;
  5
    }
  6
    /* 第二条摘要：深红 */
  7
    .news-b {
  8
      color: #800000;
  9
    }
  10
  </style>
  11
  <body>
  12
    <p class="news-a">第一条摘要……</p>
  13
    <p class="news-b">第二条摘要……</p>
  14
  </body>

  检查两点：① 两条规则不能都写同一个类名，否则后一条会覆盖前一条；② 标签上必须挂上对应的 class 属性，只写 CSS 不写名字是选不中的。

• 2-3 只改”这一个”日期 页面上有三处时间文字（新闻里的发布时间、正文里的时间、页脚里的更新时间）。要求：只把新闻发布时间那一处调成浅灰 #b2b2b2，另外两处保持黑色。 （练习文件 test_07_id选择器.html 里有这三处时间，样式写在 head 的样式区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：要”精准到唯一一个元素”——元素选择器会改一片，类选择器会改一批，只有一种选择器是唯一命中的 二级 · 方法：id 选择器：#id属性值 {...}；先给那一处时间写 id="time" 三级 · 骨架：<标签 id="____">时间</标签> + #____ { color: #b2b2b2; }

  参考答案（做完再点开）

  1
  <style>
  2
    #time {
  3
      color: #b2b2b2;
  4
    }
  5
  </style>
  6
  <body>
  7
    <!-- 只给这一处时间挂 id -->
  8
    <span id="time">2024年05月15日 20:07</span>
  9
    ...
  10
    另外两处保持原样
  11
  </body>

  对照课程 05. 央视新闻-标题-样式(选择器).html：案例里 <span class="cls" id="time"> 就是这样做的。注意 id 一个页面只能出现一次——如果三处时间都要变灰，正确做法是给它们挂同一个 class，用类选择器（.date { color: #b2b2b2; }）。

• 2-4 只给”填用户名的那一个”输入框设文字颜色 搜索框区域里有两个输入框：一个是单行文本框（用来填用户名），一个是密码框。要求：只让单行文本框里输入的文字是灰色，密码框不受影响。 （练习文件 test_07_属性选择器.html 里有这两个输入框，样式写在 head 的样式区。）

  提示（先自己想，实在想不出再点开）

  一级 · 思路：两个都是同一种输入元素，靠”标签名”分不开；但它们身上有个属性不一样——这正是属性选择器要解决的 二级 · 方法：元素名称[属性名="值"] { ... }，属性的值就是”单行文本”的类型名 text 三级 · 骨架：input[____="____"] { color: ____; }

  参考答案（做完再点开）

  1
  /* 属性选择器：只选 type 属性为 text 的 input */
  2
  input[type="text"] {
  3
    color: gray;
  4
  }

  对照 PPT 的属性选择器示例 input[type="text"] {...}。补充：input[type] 是”只要有 type 属性就选中”（两个输入框都会被选中），input[type="text"] 才限定到具体值。

三、综合题#

• 3-1 用选择器把新闻页面的样式管起来 页面（练习文件已备好）里有：一行新闻大标题、一个来源超链接、两处日期、一块”正文区”（里面有多段文字和一张图）和一块”侧边栏”（里面也有一段文字）。按下面的步骤上样式：

  1. 让页面上所有超链接都去掉下划线（一条规则）
  2. 把两处日期都调成浅灰 #b2b2b2，要求只写一条规则、名字可复用
  3. 只让正文区里的段落行高 2 倍、首行缩进 2 个字符；侧边栏里的段落不受影响
  4. 做完后想一想并动手验证：第 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; }

  参考答案（做完再点开）

  1
  <style>
  2
    /* 1. 元素选择器：所有超链接去掉下划线 */
  3
    a {
  4
      text-decoration: none;
  5
    }
  6
  
  7
    /* 2. 类选择器：两处日期共用一套样式（名字见名知义、可复用） */
  8
    .date {
  9
      color: #b2b2b2;
  10
    }
  11
  
  12
    /* 3. 后代选择器：只选"正文区 div 里面"的段落 */
  13
    .content p {
  14
      line-height: 2;
  15
      text-indent: 2em;
  16
    }
  17
  </style>
  18
  <body>
  19
    <h1>【新思想引领新征程】推进长江十年禁渔 谱写长江大保护新篇章</h1>
  20
    <a href="https://www.cctv.com" target="_blank">央视网</a>
  21
  
  22
    <span class="date">2024年05月15日 20:07</span>
  23
  
  24
    <div class="content">
  25
      <p>央视网消息（新闻联播）：……</p>
  26
      <img src="img/1.gif" width="80%">
  27
      <p>行走在长江沿线，科研人员发现很多可喜现象。</p>
  28
    </div>
  29
  
  30
    <div class="sidebar">
  31
      <p>侧边栏：相关阅读推荐。</p>
  32
    </div>
  33
  
  34
    <span class="date">2026年09月29日 更新</span>
  35
  </body>

  显示更多显示更少

  第 4 步的答案：a 是元素选择器、.date 是类选择器，类选择器优先级更高——日期的规则不会被元素规则盖掉。把两条规则的顺序换一换不影响结果（优先级不同时，顺序不起作用；只有优先级相同时才是”后写的生效”）。