cup11's blog

Appearance

A24. CSS 选择器 ​

4.1. 🌟 id、class 等 HTML 属性 ​

每个人都有唯一的身份证号，但可以带上多个“标签”（如高一、1班、男生、编程社小组）。HTML元素也有这样的"身份证"和"标签"，这就是我们今天要讲的 id 和 class。

id 和 class 都是全局属性，每个元素都可以拥有。

当一个元素 具有多个 class 时，需要用“空格”分隔。

属性对比：

html
<!-- 唯一标识 -->
<div id="main-header">网站标题</div>

<!-- 可重复使用 -->
<button class="btn primary">确认</button>
<button class="btn">取消</button>

TIP

CSS 中，当 id 或某一个 class 需要多个单词时，常常使用 - 连接多个单词，所有单词均用小写。

注意：如果使用空格，说明你认为这是两个类（两个标签），而非一个类名（一个文本较长的标签）。

WARNING

同一个页面里 id 就像身份证号，重复使用会导致界面混乱！

4.2. ⭐ style、link 元素引入样式表 ​

CSS 永远不能脱离 HTML 而存在。如何将 CSS 嵌入 HTML？除了上述 style 属性之外，还有两种更常见的方式。

对元素样式表的引入通常都写在 <head> 元素内。

  • 一种使用 style 元素，内部写上 CSS 样式表。
  • 另一种使用 link 元素，用 href 属性引入外部的样式表。

两者都可以使同一条样式对多个元素同时生效，而外部样式表更可以使一个样式表对不同界面都生效。

html
<!-- 直接在 HTML 中写 -->
<style>
  p { color: blue; }
</style>

<!-- 从 HTML 外部的文件引入 -->
<link rel="stylesheet" href="style.css">

4.3. 🌟 样式表的基本语法 ​

当 CSS 脱离了 HTML 的内嵌属性而存在，就要像发布命令一样明确。

因为，CSS 最终还是要作用于具体的 HTML 元素之上，使 HTML 元素做出对应的改变。

所以，要通知正确的人（选择器），说清楚做什么事（声明块）！

单条样式表的语法结构：

css
selector { /* 选择器：通知谁 */
  property: value; /* 声明语句：做什么（可以有多条） */
} /* 大括号（形式界限） + 声明语句 = 声明块 */

实际案例（先复制 HTML，再复制 CSS 到 CSS 窗格查看效果）：

css
h1 {
  font-size: 12px;
  color: #888;
}
html
<h1>标题</h1>
<div>内容内容内容内容</div>
<h1>下一个标题</h1>
<div>内容内容内容内容</div>

WARNING

常见错误：忘记分号。这就像句子没句号，导致后面所有样式全部作废！

4.4. 🌟 ID选择器、类选择器、标签选择器 ​

精准狙击（#id） vs 范围打击（.class），不同战场要用不同武器！

4.4.1. 基础选择器符号 ​

ID 选择器使用 #，后跟 id 名；类选择器使用 .，后跟 class 名；标签选择器直接写标签名。

实际案例（用法同上）：

css
#special-box { /* 精确打击，选中 id="special-box" 的元素 */
  border: 2px dashed red;
}

.highlight { /* 群体攻击，选中 class 含有 "highlight" 的元素 */
  background: gold;
}

h1 { /* 群体攻击，选中所有 h1 标签的元素 */
  color: red;
}
html
<h1>标题</h1>
<div id="special-box">
  <span>Wow, </span><span class="highlight">Special Box</span><span>!</span>
</div>
<div class="box">
  这不是 special-box
</div>

4.4.2 组合用法 ​

css
.card.vip { /* 同时满足两个类 */
  background: purple;
}
html
<div class="card vip">尊享会员卡</div>
<div class="card">仅一个不生效</div>
<div class="vip">仅一个不生效</div>

TIP

ID 选择器的优先级高于类选择器。

不要滥用 ID 选择器，因为每一个 ID 选择器只能选中一个元素，复用性较差。

4.5. ⭐ 选择器列表 ​

给多个元素发布同一命令，难道要写 N 遍？CSS 的批量操作来了！

写法：

css
h1, h2, .title {
  font-family: '楷体';
}

下面两种写法等价：

css
/* 分开写 */
h1 { color: red; }
h2 { color: red; }

/* 合并写 */
h1, h2 { color: red; }

两者效果相同，实战中必然推荐前者。

INFO

DRY 原则：Don't Repeat Yourself.

选择器列表是该选择的实践案例。如果内容相同，就合并同类项，这样修改时就不会改漏。

WARNING

逗号分隔写成空格，会变成后代选择器！（见下）

4.6. ⭐ 含有父元素的选择器 ​

想在图书馆找某本书，总得知道在哪个区域吧？CSS找元素也要看"书架"！

  • parent child：在 parent 选择器的所有子孙元素中寻找 child；
  • parent > child：在 parent 选择器的直接子元素（“亲儿子”）中寻找 child；
css
nav .menu-item {
  padding: 10px;
}

header > .logo {
  background-color: yellow;
}
html
<header>
  <nav>
    <div class="logo">选不中我</div>
    <div class="menu-item">项目 1</div>
    <div class="menu-item">项目 2</div>
  </nav>
  <div class="menu-item">选不中我</div>
  <div class="logo">Logo</div>
</header>
<main><div class="logo">选不中我</div></main>

实战案例：

css
article > p { /* 只选正文段落 */
  line-height: 1.6;
  font-size: 1rem;
}
html
<article>
  <p>正文段落</p>
  <div class="comment">
    <p>评论内容</p>
  </div>
</article>

知识回顾 ​

  1. id 是唯一标识符，# 号选择；class 是可重复使用的类名，. 号选择。
  2. 样式表引入：内嵌用 <style>，外部用 <link>。
  3. 基本语法：selector { attribute: value; }。
  4. 选择器列表使用逗号，所有元素平行选择。
  5. 层级选择用空格 选择所有子孙 或 > 选择直接子元素。
  6. 优先级：ID > class > 标签选择器。

课后练习 ​

  1. （单选）哪个选择器优先级最高？
    • A. header
    • B. #nav
    • C. div
    • D. h1.title
  2. （填空）给<div class="box active">添加样式的选择器应写作_____
  3. （纠错）为什么这个样式不生效？
    html
    <ul class="list">
  <li class="item">1</li>
  <li class="item">2</li>
</ul>
    css
    .list, item {
  color: blue;
}
  4. （填空）选择<ul>元素下所有直接子元素<li>的写法是 ______
答案
  1. B。ID 选择器优先级最高。详见 B32 - 优先级规则。
  2. .box.active（特异性最强，实际上 .box 和 .active 也都可以选中，但可能会误选到其它元素）。
  3. 将 , 改为 > 或空格，将 item 改为 .item。
  4. ul > li

Built by Vitepress | Apache 2.0 Licensed

Copyright © 2025 cup11