尚硅谷前端 2023 · 教程站

主题

CSS 长度单位和颜色设置与CSS 基本选择器（Day5 2/4） ​

本页对应 Day05_CSS，共 6 段视频，约 41 分钟。

学习目标 ​

  • 能够使用类选择器为多个元素设置相同样式，并正确书写一个元素包含多个类名的空格分隔形式。
  • 能够使用 ID 选择器为元素设置样式，并说明 ID 在页面中应保持唯一的规则。
  • 能够使用全局选择器为页面所有元素统一设置样式，并识别其作用范围。
  • 能够比较行内样式、ID 选择器、类选择器、标签选择器和全局选择器的权重顺序，并据此判断冲突样式的最终生效结果。
  • 能够判断块级元素、行内元素和行内块元素的显示特点，包括是否独占一行、能否设置宽高。
  • 能够使用 display 属性修改元素的显示模式，并通过页面效果验证修改结果。

知识点 ​

本节回顾清单（保留原笔记代码） ​

text
1. HTML
   1.1 表单标签
       label
       fieldset legend
   1.2 iframe
   1.3 字符实体
          <  >   &
       ¥  ©  ×  ÷
   1.4 全局属性
       title、lang、id、name、class、style
   1.5 meta 元信息
2. CSS
   2.1 在HTML中使用 CSS
       行内式、内嵌式、外链式
   2.2 CSS语法结构
       ① 内嵌式和外链式
         选择器、声明块、声明、CSS属性和它的值
       ② 行内式
   2.3 CSS层叠性
   2.4 注释

先纠正转写稿里的同音字：DRV 是 div，会级 是“块级”，行列 是“行内”，内选择系 是“类名选择器”，井号 是 #，点 是 .，星号 是 *。这些说法在调试时要分清。

HTML 表单标签：label、fieldset、legend ​

为什么需要：表单要让人看懂“这个输入框填什么”，也要让点击文字能聚焦控件。怎么想：label 负责“文字—控件”的关联，fieldset 负责分组，legend 给分组起标题。怎么做：

html
<label for="user">用户名</label>
<input id="user" name="user">

<fieldset>
  <legend>登录信息</legend>
  <label for="pwd">密码</label>
  <input id="pwd" name="pwd" type="password">
</fieldset>

易错点：label 的 for 要对应控件的 id；id 要唯一；name 是提交字段名，不要和 id 混用。

iframe 与字符实体 ​

为什么需要：iframe 用来在当前页嵌入另一个页面；字符实体用来显示会被 HTML 解析掉或键盘不好输入的特殊字符。怎么想：先判断“是嵌入页面，还是显示符号”。怎么做：

html
<iframe src="https://example.com" title="嵌入页面"></iframe>
<p>&nbsp; &lt; &gt; &amp; &yen; &copy; &times; &divide;</p>

易错点：&lt; 显示小于号，不写会当成标签开头；实体一般要带分号；&nbsp; 是不换行空格，不要拿它代替正常排版。

全局属性与 meta 元信息 ​

为什么需要：全局属性给元素补通用信息，meta 给文档补编码、视口等元信息。怎么想：id 做唯一标识，class 做样式钩子，style 做行内样式，title 做提示，lang 标语言，name 常用于表单字段。怎么做：

html
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div id="box" class="item box" title="提示" lang="zh-CN" style="color:#990099">
  内容
</div>

易错点：转写稿反复强调，class 是 HTML 属性，一个元素要多个类名时用空格分隔：class="item box"，不要重复写两个 class；id 必须唯一，虽然 CSS 里重复写也能命中，但后面 JS 会受影响。选择器写法也要分清：.item 选类名，#box 选 id，div 选标签，* 选全部。

CSS 三种引入方式与语法结构 ​

为什么需要：把结构和样式分开，页面才好维护。怎么想：外链适合多页复用，内嵌适合单页小样式，行内适合临时覆盖但少用。怎么做：

html
<link rel="stylesheet" href="style.css">

<style>
  .item { color: #009; }
  #box { color: #f90; }
</style>

<div style="color:#990099">行内式</div>

内嵌式和外链式的结构是“选择器 + 声明块”，声明块里是“属性: 值;”；行内式只写声明，不写选择器。易错点：行内式不要写成 style=".item{...}"；声明之间用分号；类选择器有点，ID 选择器有井号，标签选择器没有符号。

CSS 层叠性、权重与注释 ​

为什么需要：多个选择器可能同时命中一个元素，必须知道谁生效。怎么想：先比权重，再比先后。转写稿的调试结论是：行内样式最高；选择器里 #id 大于 .类名，类名大于标签名，标签名大于 *；权重相同则后写的覆盖先写的；class 属性里类名先后不影响结果，CSS 里的先后才影响。怎么做：

css
* { color: #900; }
div { background: #ccc; }
.item { color: #009; }
#box { color: #f90; }

易错点：用开发者工具看被覆盖的样式会有删除线；* 会选到 html、body、head 等所有元素，转写稿里能看到 body 默认有 8px 外边距。CSS 注释用 /* 注释 */，不要用 HTML 的注释写法。

元素显示模式与 display 调试 ​

为什么需要：布局时要知道元素是否独占一行、能不能设宽高。怎么想：转写稿用 div、span、input 对比：div 默认块级，独占一行且可设宽高；span 默认行内，不独占一行且宽高无效；input 默认行内块，不独占一行但可设宽高。怎么做：

css
span { display: block; }        /* 变块级：独占一行，可设宽高 */
div { display: inline; }        /* 变行内：不独占，宽高无效 */
div { display: inline-block; }  /* 行内块：不独占，可设宽高 */

易错点：给 span 直接写 width、height 不生效，不是样式没写对，而是显示模式限制；用 display 改模式后再看效果。转写稿还演示了 input 改成 inline 仍能设宽高，这是替换元素的特殊表现，不要只背结论，要用检查元素看实际计算样式。

说明：本节转写稿的实际内容 ​

本节笔记标题写的是“CSS 长度单位和颜色设置”，但转写稿实际讲的是：类名选择器、ID 选择器、全局选择器、基本选择器权重、元素显示模式，以及用 display 修改显示模式。转写稿中没有系统讲长度单位和颜色设置，也没有附图片，因此下面按转写稿真实内容整理，不补造未讲的知识点。颜色值如 #900、#080、#f00 只作为示例出现。

类名选择器：用“点 + 类名”选中元素 ​

为什么需要：标签选择器只能按标签名选，若想让 p 和 div 拥有相同样式，逐个写标签选择器会重复。类名选择器让不同标签共享同一套样式。
怎么想：class 是 HTML 属性，写在标签内部；CSS 中用 .类名 选中“类名相同的元素”，不关心标签名。
怎么做：

html
<p class="item">段落</p>
<div class="item">盒子</div>
<div class="item box">两个类名</div>
css
.item {
  width: 400px;
  height: 150px;
  padding: 20px;
  background: #900;
  color: #fff;
}

一个元素可以有多个类名，但只能写一个 class 属性，多个类名用空格分隔，例如 class="item box"。
易错点：不能写成两个 class 属性；后写的 class 不会“叠加”，而是覆盖前一个属性。CSS 中 .item 与 .box 都能选中带对应类名的元素。

ID 选择器：用“# + ID 名”选中 ​

为什么需要：ID 选择器用于选中带某个 id 的元素，也可用于锚点、后续 JavaScript 关联。
怎么想：id 也是 HTML 属性；CSS 写 #box，表示找 id="box" 的元素。
怎么做：

html
<div id="box">盒子</div>
css
#box {
  width: 400px;
  height: 200px;
  padding: 20px;
  background: #080;
  color: #fff;
}

易错点：ID 按规范应唯一。转写稿演示过：多个元素写相同 ID，CSS 样式仍可能生效，但不符合标准，且会影响后续 JavaScript。若把 #box 误写成 box，就变成找标签名为 box 的元素，页面中没有该标签，自然不生效。

全局选择器：星号选中所有元素 ​

为什么需要：想给页面所有元素设置统一特性时，可用通配选择器。
怎么想：* 表示所有元素，包括 html、body、head 等；head 本身不显示，所以看不见效果。
怎么做：

css
* {
  border: 2px solid #f00;
}

调试时可在浏览器“检查元素”中把鼠标放到元素上，查看它命中的样式；转写稿中看到 body 默认有外边距，html 也被选中。
易错点：通配选择器范围太大，权重最低，不要滥用；它选得“不精确”，所以优先级低。

基本选择器权重：越精确越高 ​

为什么需要：多个选择器同时命中一个元素时，要知道最终听谁的。
怎么想：权重顺序为：行内样式 > ID 选择器 > 类选择器 > 标签选择器 > 全局选择器。权重相同，后写的覆盖先写的。
怎么做：

css
* { color: #900; }
div { color: #080; }
.item { color: #009; }
#box { color: #f90; }

若元素同时命中这些规则，通常 ID 规则胜出。转写稿还演示了：两个类选择器权重相同，CSS 中后写的覆盖先写的；class 属性中类名先后顺序不影响结果。
易错点：不要以为写在 HTML 前面的类名优先；比较的是 CSS 规则顺序和权重。检查元素中被覆盖的样式会带删除线。

元素显示模式：块级、行内、行内块 ​

为什么需要：元素如何占行、能否设宽高，直接影响布局。
怎么想：判断核心是“是否独占一行”和“能否设置宽高”。div、h1 等默认块级：独占父元素一行，可设宽高；span、em、strong、a 等默认行内：可与文字同行，不能设宽高；input、图片等默认行内块：不独占一行，但可设宽高。
怎么做：用 display 修改：

css
div { display: inline; }
span { display: block; }
input { display: inline-block; }

易错点：给 span 设宽高无效，检查元素会提示 display: inline 不能设置宽高；把 input 改成 inline，按转写稿说法它仍保留可设宽高的特性，无法变成“真正行内”。旧标准常只分块级和行内，行内块可视为行内的一种扩展；实际开发中不必死抠文字概念，重点看效果。

类名选择器：用点号复用样式 ​

为什么需要：当 p、div 等不同标签要共享同一套样式时，逐个写标签选择器会重复；类名选择器可以让“样式”与“标签名”解耦。
怎么想：class 是 HTML 属性，写在标签内部；CSS 里用“点 + 类名”选中它。多个元素可以同名，一个元素也可以有多个类名，类名与元素是多对多关系。
怎么做：给前四个元素加 class="item"，后两个不加，运行后前四个生效、后两个不生效。一个元素要加多个类名时，不能写两个 class，而要在同一个 class 里用空格分隔。

html
<p class="item">段落</p>
<div class="item">盒子</div>
<div class="item box">两个类名</div>
<p class="box">段落</p>
css
.item {
  width: 400px;
  height: 150px;
  padding: 20px;
  background: #900;
  color: #fff;
}
.box {
  font-size: 2em;
  font-weight: bold;
  font-style: italic;
}

调试时可以看到：class="item box" 的 div 既能被 .item 选中，也能被 .box 选中；class 属性里类名的先后不影响权重，真正看的是 CSS 中规则出现的顺序。
易错点：class 是 HTML 属性，不是 CSS 属性；同一个元素不能重复写两个 class，后写的会覆盖前写的；多个类名必须用空格分隔。

ID选择器：用井号精确定位 ​

为什么需要：有时需要给某个元素一个更“精确”的标记，CSS 用 #id名 选中；ID 也常用于锚点和后续 JavaScript 关联。
怎么想：id 和 class 都是 HTML 属性，但 CSS 写法不同：标签名直接写，类名用 .，ID 用 #。
怎么做：给一个 div 写 id="box"，CSS 写 #box；运行后只有这个 div 生效。

html
<div id="box">我是div</div>
<p class="box">我是p</p>
css
#box {
  width: 400px;
  height: 200px;
  padding: 20px;
  background: #080;
  color: #fff;
}

易错点：ID 必须唯一。转写稿中测试过：两个元素写相同 ID，CSS 仍可能生效，但这不符合标准，也会影响后续 JavaScript；另外若把 #box 写成 box，就会变成找 box 标签，页面没有该标签，自然不生效。

全局选择器：星号选中所有元素 ​

为什么需要：当要给页面所有元素统一设置某些总体特性时，逐个写太麻烦；* 可以一次选中所有元素。
怎么想：星号叫全局选择器，也叫通配选择器，意思是“通通都能配”。
怎么做：写 * { border: 2px solid #f00; }，运行后 h1、p、div、body、html 等都会被选中；head 也能被选中，但 head 本身不显示在页面上，所以看不见。

css
* {
  border: 2px solid #f00;
}

调试时用检查元素可以看到 body 四周有默认外边距，html 外层也有框；被覆盖的样式会显示删除线。
易错点：星号威力大，不要滥用；它选的是所有元素，包括不显示的 head，不要误以为“页面上没看见就是没选中”。

基本选择器权重：越精确越优先 ​

为什么需要：多个选择器可能同时选中一个元素，样式冲突时必须有优先级规则。
怎么想：选择越精确，权重越高。顺序是：行内样式 > ID选择器 > 类选择器 > 标签选择器 > 全局选择器。权重不同时，与 CSS 前后顺序无关；权重相同时，后写的覆盖先写的。
怎么做：让一个 div 同时有 id="box"、class="item item01"，分别用 #box、.item、div、* 设置冲突颜色，观察最终生效值；再让 .item01 和 .item 都设颜色，验证“权重相同后写覆盖”。

css
* { color: #900; }
div { background: #ccc; }
.item { height: 300px; }
.item01 { padding: 20px; }
#box { color: #f90; }

易错点：class 属性中类名的先后不影响权重；行内样式不是选择器，但它权重最高；检查元素中的删除线表示该样式被更高权重覆盖。

元素显示模式：块级、行内、行内块 ​

为什么需要：元素要排列布局，必须知道它默认如何占位、能否设置宽高。
怎么想：看它是否独占一行。块级元素如 div、h1 独占父元素一行，可设宽高；行内元素如 span、em、strong、a 不独占一行，不能设宽高；行内块如 input、图片等不独占一行，但可设宽高。
怎么做：给 div 和 span 加背景、宽高、边框，刷新观察：div 很宽并各占一行；span 的宽高设置不生效，仍和文字在一行。

html
<div class="item">我是div</div>
<span>我是span</span>
<input type="text">
css
.item { width: 1400px; height: 1100px; border: 2px solid #880; background: #900; }
span { background: #080; width: 300px; height: 100px; }

易错点：行内元素设置宽高无效；行内块按最早标准也可归入行内，文档说“只有块级和行内”也能成立，不必死抠概念，关键看是否独占一行、能否设宽高。

display：修改显示模式 ​

为什么需要：元素默认显示模式不总满足布局，需要把块改成行内、行内改成块或行内块。
怎么想：用 CSS 属性 display 修改，常用值有 inline、block、inline-block。
怎么做：div { display: inline; } 后不再独占一行且不能设宽高；span { display: block; } 后独占一行并可设宽高；span { display: inline-block; } 后不独占一行但可设宽高；input { display: block; } 后独占一行。

css
div { display: inline; }
span { display: block; }
input { display: block; }

易错点：按转写稿测试，input 默认是行内块，改成 inline 后仍可能设置宽高，这是标准历史与 display 值扩展造成的现象；学习时以实际效果和“是否独占一行、能否设宽高”判断，不要只背名词。

课堂画面 ​

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

课堂画面 6

代码示例 ​

示例一：类名选择器、ID 选择器与全局选择器 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>类名选择器 / ID 选择器 / 全局选择器</title>
  <style>
    /* ① 全局（通配）选择器：* 选中页面中所有元素，包括 html、body、head */
    * {
      border: 2px solid #f00;
    }

    /* ② 类名选择器：点 + 类名，不看标签名，只看 class 里有没有它 */
    .item {
      width: 400px;
      height: 150px;
      padding: 20px;
      background: #900;
      color: #fff;
    }

    /* ③ 一个元素可以有多个类名，用空格分隔，任意一个都能选中它 */
    .box {
      font-size: 2em;
      font-weight: bold;
      font-style: italic;
    }

    /* ④ ID 选择器：井号 + ID 名 */
    #books {
      width: 400px;
      height: 200px;
      padding: 20px;
      background: #080;
      color: #fff;
    }
  </style>
</head>
<body>
  <p class="item">我是 p，有 item 类名</p>
  <div class="item">我是 div，有 item 类名</div>
  <p class="item box">我是 p，有 item 和 box 两个类名</p>
  <div class="item box" id="books">我是 div，有 item、box 类名和 books 这个 ID</div>
  <p>我没有类名，选不上</p>
  <div>我没有类名，选不上</div>
</body>
</html>

关键行与易错点

  • class 是 HTML 属性，写在标签里；.item 是 CSS 选择器，两者不是一回事。
  • 同一个元素不能写两个 class 属性，写第二个会把第一个覆盖掉（HTML 属性是覆盖，CSS 属性才是层叠），多个类名只能用空格分隔：class="item box"。
  • 一个类名可以给多个元素用，一个元素也可以用多个类名，类名和元素是多对多关系，所以类选择器最常用。
  • #books 只认 id，class="books" 是选不上的；ID 理论上必须唯一，虽然重复写对 CSS 不影响，但后面 JS 会出问题。
  • * 会把 html、body、head 全都选上（head 不显示所以看不见），注意 body 自带 8px 外边距，不是紧贴页面边缘。

示例二：基本选择器的权重（优先级） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>基本选择器之间的权重</title>
  <style>
    /* 权重最低：全局选择器 */
    * {
      color: #900;
    }

    /* 标签名选择器：高于全局选择器 */
    div {
      background: #ccc;
    }

    /* 类选择器：高于标签名选择器 */
    .item {
      height: 300px;
      color: #09f;
    }

    /* 与 .item 权重相同，写在后面，冲突时后面的胜出 */
    .item01 {
      padding: 20px;
      color: #099;
    }

    /* ID 选择器：选择器里权重最高 */
    #box {
      color: #f90;
    }
  </style>
</head>
<body>
  <div class="item item01" id="box">我是 div，最终文字是 ID 的橙色</div>
  <p class="item" style="color: #990;">我是 p，行内样式权重最高</p>
  <h1>我是 h1，只有全局选择器选中我</h1>
</body>
</html>

关键行与易错点

  • 权重顺序：行内样式 > ID 选择器 > 类选择器 > 标签名选择器 > 全局选择器。越“精确”的选择器，权重越高。
  • 权重不同时，跟 CSS 里写的先后顺序无关，谁权重高听谁的；权重相同时，后写的覆盖先写的。
  • 比较先后看的是 CSS 里的顺序，不是 class="item item01" 里类名的顺序，类名之间完全平等。
  • 行内 style 不是选择器，属于“开挂”，所有选择器都干不过它；用检查元素能看到被覆盖的样式带删除线。
  • 同一个元素上 background、height、padding 这些没冲突的声明会层叠到一起，只有同属性冲突时才比权重。

示例三：元素的显示模式与 display 修改 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>元素显示模式与 display</title>
  <style>
    .item {
      background: #900;
      color: #fff;
      border: 2px solid #880;
    }

    /* div 默认 block：独占一行，宽高生效 */
    .block-demo {
      width: 400px;
      height: 60px;
    }

    /* span 默认 inline：不独占一行，宽高不生效 */
    .inline-demo {
      background: #080;
      width: 300px;
      height: 60px;
    }

    /* 块级改成行内：不再独占一行，宽高失效 */
    .to-inline {
      display: inline;
    }

    /* 行内改成块级：独占一行，宽高生效 */
    .to-block {
      display: block;
    }

    /* 行内块：不独占一行，但可以设置宽高 */
    .to-inline-block {
      display: inline-block;
    }

    /* input 默认就是行内块 */
    .input-demo {
      width: 300px;
      height: 40px;
    }
  </style>
</head>
<body>
  <div class="item block-demo">我是 div，默认 block</div>
  <div class="item block-demo to-inline">我是 div，display: inline</div>
  <div class="item block-demo to-inline-block">我是 div，display: inline-block</div>

  <span class="inline-demo">我是 span，默认 inline</span>
  <span class="inline-demo to-block">我是 span，display: block</span>
  <span class="inline-demo to-inline-block">我是 span，display: inline-block</span>

  <input class="input-demo" type="text">
  <input class="input-demo" type="text">
  <input class="input-demo" type="text">
</body>
</html>

关键行与易错点

  • 判断依据只有一条：是否独占一行。独占一行的就是块级（block），不独占的就是行内；行内块是在“不独占一行”的基础上又能设置宽高。
  • div 默认 block，span 默认 inline，input、img 默认 inline-block。
  • 给行内元素（span）直接设置 width / height 不生效，检查元素会看到样式被划掉并提示 display: inline 阻止宽度生效——必须先改 display。
  • 独占一行是“独占父元素里的一行”，不是整个页面的一行，父元素里还可以并排放别的块。
  • 按早期标准只有块级和行内两种，行内块被当作行内的一种，所以 input 即使写成 display: inline，宽高仍然生效，这不叫错，是标准没细分，不影响实际开发。

常见错误 ​

  • 现象：给同一元素写了两个 class 属性，后一个类名不生效。
    原因：class 是 HTML 属性，同一属性重复书写时后者会被忽略；不是 CSS 层叠规则。
    修法：只写一个 class，多个类名用空格分隔，如 class="item box"。

  • 现象：多个元素使用了相同 id，CSS 看似还能生效，但后续 JS 容易出错。
    原因：把 id 当成 class 使用，忽略了 id 的唯一性要求。
    修法：页面内 id 保持唯一；需要复用样式时优先用 class。

  • 现象：写了 box { ... } 想选中类名为 box 的元素，却没有效果。
    原因：漏写类选择器的点号，浏览器把它当成标签名选择器。
    修法：类选择器写成 .box；ID 选择器写成 #box；标签选择器才直接写标签名。

  • 现象：给 span 等行内元素设置 width、height 不生效。
    原因：默认显示模式为行内，行内元素不允许直接设置宽高。
    修法：按需求改用块级/行内块元素，或用 display: block / inline-block 调整显示模式。

  • 现象：两个选择器权重相同，开发者以为写在 CSS 前面的会生效，结果被覆盖。
    原因：权重相同时，后写的样式覆盖先写的样式；与 HTML 中类名书写顺序无关。
    修法：调整 CSS 声明顺序，或提高选择器权重；不要依赖 class 属性中的先后顺序。

  • 现象：行内 style 与外部选择器冲突时，外部样式不生效。
    原因：行内样式权重高于普通选择器，相当于“直接写到元素内部”。
    修法：优先统一用选择器管理样式；必须覆盖时提高选择器权重或调整样式来源。

练习 ​

  1. 写一个 div 和一个 p，让它们共用同一个类名样式，再给 div 追加第二个类名，观察两个类名样式是否同时生效。
  2. 分别用标签选择器、类选择器、ID 选择器、通配选择器给同一元素设置不同颜色，验证最终颜色并说明权重排序。
  3. 写两个权重相同的类选择器，分别设置不同背景色，交换它们在 CSS 中的书写顺序，观察覆盖结果。
  4. 用 div、span、input 各写若干个，观察默认显示模式差异；再用 display 分别改成 block、inline、inline-block 验证布局变化。
  5. 故意写一个重复 class 属性和一个重复 id，用浏览器检查工具观察问题，并改成符合规范的写法。

原视频对照 ​

#视频时长
1类名选择器06:03
2ID选择器04:03
3全局选择器02:57
4基本选择器之间的权重08:15
5元素的显示模式12:51
6修改元素的显示模式07:44

小结 ​

  1. 类选择器最常用，适合多元素复用样式；多类名必须写在一个 class 属性内，用空格分隔。
  2. ID 选择器权重高，但 id 应保持唯一，不适合承担批量复用样式的职责。
  3. 基本选择器权重顺序可记为：行内样式 > ID > 类 > 标签 > 通配。
  4. 权重不同时看权重，权重相同时看 CSS 书写顺序，后写覆盖先写。
  5. 元素的默认显示模式直接影响能否独占一行、能否设置宽高。
  6. display 可以修改显示模式，但行内块元素改成 inline 后仍可能保留可设宽高的特性，应以实际效果和检查工具为准。
  7. 布局问题先判断元素默认显示模式，再判断选择器权重和覆盖关系，排查效率更高。