正在加载...

CSS 选择器

一条 CSS 规则要解决两件事：给谁设置样式，以及设置成什么样。“成什么样”你已经通过属性、值和单位练习过了。这一节要讲的是“给谁”，也就是规则开头的选择器。

什么是 CSS 选择器？

选择器是一种匹配模式，浏览器靠它判断声明块该作用在哪些 HTML 元素上。只要选择器与页面中的某个元素匹配，这个元素就会应用 { } 里的全部样式。

基础选择器一览

先从这四种开始。组合器、属性选择器和伪类会在后面的课程里学到，现在先把元素、class、id 和 * 用熟。

📊 基础 CSS 选择器

选择器 匹配对象 示例
元素（类型） 所有标签名相同的元素 p { … }
Class 带有该 class 属性的元素 .card { … }
Id 具有该唯一 id 的那一个元素 #hero { … }
通配 页面里的每个元素（谨慎使用） * { … }

元素（类型）选择器

元素选择器就是标签名本身，前面既没有点，也没有井号。h1 会给页面上每个 <h1> 设置样式，p 则作用于每个段落。想为某个标签定下统一的基础样式时，它是日常最常用的“大范围”工具。

用元素选择器设置标题和段落

css
CSS Code 
h1 {
color: #0f766e;
font-size: 2rem;
}

p {
color: #334155;
line-height: 1.6;
}

类型选择器适合用在哪里

适合设置全站默认值，比如 body 的文字颜色、标题字重、列表间距。如果只有部分段落需要特殊样式，就给它们加一个 class，不要去改所有 p 的外观。

class 选择器

class 选择器以点号（.）开头，后面跟 class 名称。在 HTML 里，你用 class="card" 来标记元素。同一个 class 可以用在任意多个元素上，所以 class 才是可复用设计的主力。

用 class 选择器做可复用的卡片

css
CSS Code 
.card {
background: #f8fafc;
border: 1px solid #cbd5e1;
padding: 1rem;
border-radius: 8px;
}

HTML 里的名称必须与 class 一致

CSS 里的 .card 只会作用于确实带有 class="card" 的元素（或者带有多个 class 且其中包含 card 的元素）。拼写必须完全一致，.Card 和 .card 是两个不同的选择器。

id 选择器

id 选择器以井号（#）开头，后面跟 id 名称。在 HTML 里写成 id="hero"。id 在页面中必须唯一，也就是只能对应一个元素。大多数样式优先用 class，id 留给页面上真正只出现一次的关键位置。

用 id 选择器设置唯一的横幅

css
CSS Code 
#hero {
min-height: 40vh;
background: #0f172a;
color: #f8fafc;
padding: 2rem;
}

通配选择器（*）

通配选择器 * 匹配所有元素。它有时用于简单的重置（例如设置 box-sizing），但如果给所有东西统一加颜色或外边距，很容易破坏页面布局。日常的外观设置，还是用指向更明确的选择器。

谨慎使用通配选择器

css
CSS Code 
* {
box-sizing: border-box;
}

在一个页面里组合使用选择器

真实的样式表会把几种类型混着用：用元素选择器写默认样式，用 class 写可复用的部件，用 id 处理少数唯一的目标。下面这份小样式表展示的就是这个习惯：不是每条规则都需要 id。

一个页面中几种选择器的简单搭配

css
CSS Code 
body {
font-family: Georgia, serif;
margin: 0;
}

.card {
max-width: 28rem;
margin: 1rem;
}

#hero {
padding: 2rem;
}

class 还是 id：一个实用的习惯

  • 按钮、卡片、导航链接，以及任何可能重复使用的东西，优先用 class
  • 只有目标确实唯一时才用 id（比如页面上唯一的横幅、主搜索框）
  • 不要给每个有样式的盒子都起一个新 id，这会妨碍复用，到后面学层叠（cascade）时还会带来麻烦

动手试试

  1. 在练习页面里添加一个 <h1>、两个 <p>、一个 <div class="card"> 和一个 <section id="hero">。
  2. 为 h1 和 p 写一条元素选择器规则。
  3. 给 .card 设置内边距（padding）、浅色背景和边框（border）。
  4. 给 #hero 设置深色背景和浅色文字。
  5. 可选：加上 * { box-sizing: border-box; }，你会发现卡片里的 padding 表现得更容易预测。

常见错误

  • 想写 .card { } 却写成 card { }：少了点号，浏览器会去找名为 card 的元素，而 HTML 里并没有这种元素
  • 把 #hero { } 写成 hero { }：漏了井号
  • HTML 里是 class="card"，CSS 里却写成 .crd：匹配不上，样式自然不生效
  • 给多个元素设置相同的 id：HTML 不合法，选中结果也难以预料
  • 只靠类型选择器做一次性的设计：本来只想改一个区块，结果页面上每个 p 或 div 都变了

小结

  • 选择器决定哪些 HTML 元素会应用这条规则的样式
  • 元素选择器直接使用标签名（h1、p）
  • class 选择器以点号开头（.card），与 HTML 中的 class 属性匹配
  • id 选择器以井号开头（#hero），应当只指向一个唯一的元素
  • * 匹配一切：适合谨慎的重置，不适合用来做整体装饰
  • 可复用的界面优先用 class，id 要少用，而且只用于唯一的目标

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
8
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程