CSS 选择器 101

I’m happy to translate the article for you, but I need the full text of the article (the content you’d like translated). Could you please paste the article’s body here? Once I have the text, I’ll provide a Simplified‑Chinese translation while preserving the source link, formatting, markdown, and any code blocks or URLs unchanged.

为什么我们需要 CSS 选择器？

想象你在教室里想要下指令：

Without selectors:

“大家站起来！”

With selectors:

“穿红色衬衫的学生站起来！”
“叫 John 的学生站起来！”
“第 3 排的学生站起来！”

CSS selectors work the same way. 它们让你能够定位特定的 HTML 元素并对其应用样式。

• Without selectors: 你无法为任何元素设置样式。
• With selectors: 你可以精确控制哪些元素被样式化。

基本 HTML 示例

<div>
  <h2>Welcome</h2>

  <p>This is a paragraph.</p>

  <p class="highlight">This is highlighted.</p>

  <p id="special">This is special.</p>

  <div class="box">
    <p>Paragraph inside box</p>
  </div>
</div>

1. 元素选择器

元素选择器 用于选取所有特定类型的元素。

语法

tagname {
  /* styles */
}

示例

p {
  color: blue;
}

作用说明： 选取 所有 <p> 元素并将它们的文字颜色设为蓝色。

结果

• “This is a paragraph.” → 蓝色
• “This is highlighted.” → 蓝色
• “This is special.” → 蓝色
• “Paragraph inside box” → 蓝色

使用场景： 当你想要为某种特定类型的每个元素统一设置样式时。

更多示例

为所有标题设置样式

h1 {
  font-size: 32px;
  color: darkblue;
}

为所有 <div> 元素设置样式

div {
  background-color: lightgray;
  padding: 10px;
}

2. 类选择器

类选择器 用于定位具有特定类名的元素。

语法

.classname {
  /* 样式 */
}

（注意类名前面的点 .。）

示例

.highlight {
  background-color: yellow;
}

作用说明： 只有 class="highlight" 的元素会得到黄色背景。

结果

• “This is highlighted.” → 黄色背景
• 其他段落 → 没有黄色背景

使用场景： 当你想为一组具有相同目的或视觉风格的元素设置样式时。

多个类

一个元素可以拥有多个类：

<p class="highlight bold">Text</p>

分别定位每个类

.highlight {
  background-color: yellow;
}

.bold {
  font-weight: bold;
}

两种样式都会应用到同一个元素上。

类 vs. 元素

元素选择器（所有段落）

p {
  color: blue;
}

所有 <p> 元素都会变成蓝色。

类选择器（特定段落）

.highlight {
  color: red;
}

只有 class="highlight" 的元素会变成红色。

3. ID 选择器

ID 选择器针对单个唯一元素。

语法

#idname {
  /* styles */
}

（注意 ID 名称前的井号 #。）

示例

#special {
  font-size: 20px;
  color: red;
}

作用说明： 只有 id="special" 的元素会变成红色并使用更大的字体。

结果

• “This is special.” → 红色，20 px 字体
• 其他段落 → 无变化

重要提示： ID 必须唯一——同一个 ID 只能在一个元素上使用。

类 vs. ID

HTML 示例

<button class="btn">Click</button>
<button id="main-content">Submit</button>

CSS

.btn {
  background-color: blue;
}

#main-content {
  width: 80%;
}

4. 组合选择器

组合选择器 让您一次对多个选择器应用相同的样式。

语法

selector1, selector2, selector3 {
  /* styles */
}

（用逗号分隔选择器。）

示例

h1, h2, h3 {
  color: navy;
  font-family: Arial;
}

所有 <h1>、<h2> 和 <h3> 元素都会呈现海军蓝文字并使用 Arial 字体。

另一个示例

p, .highlight, #special {
  line-height: 1.5;
}

所有段落、类为 highlight 的元素，以及 ID 为 special 的元素的行高均为 1.5。

使用场景： 当不同的选择器需要相同的样式时。

5. 后代选择器

后代选择器 目标是嵌套在其他元素内部的元素。

语法

parent child {
  /* styles */
}

(选择器之间的空格表示 “子元素”。)

示例

div p {
  color: green;
}

作用说明： 选择位于 <div> 内部 的 <p> 元素。

给定以下 HTML

<div>
  <p>Outside div</p>
</div>

<div class="box">
  <p>Inside div</p>
</div>

• 第一个 <p>（在 <div> 之外）不受影响。
• 第二个 <p>（在 <div> 之内）会变成绿色。

回顾

理解并掌握这些选择器可以让你精确控制 HTML 的呈现方式，使你的 CSS 既强大又易于维护。祝你样式愉快！

结果

• “Outside div” → 不是绿色（不在 <div> 内）
• “Inside div” → 绿色（在 <div> 内）

更多示例

在导航中定位链接

nav a {
  color: white;
  text-decoration: none;
}

在特定类中定位段落

.box p {
  font-size: 14px;
}

更深层的嵌套

div ul li {
  list-style: square;
}

定位 <li> 元素在 <ul> 中，且位于 <div> 内。

组合选择器

您可以组合不同类型的选择器以实现更精确的定位。

元素内部的类

div .highlight {
  background-color: yellow;
}

定位在 <div> 内部具有 highlight 类的元素。

带类的元素

p.highlight {
  color: red;
}

定位具有 highlight 类的 <p> 元素（p 与 .highlight 之间没有空格）。

元素内部的 ID

section #special {
  font-weight: bold;
}

选择器优先级（特异性）

简单规则： 更具体的选择器获胜。

优先级顺序（低 → 高）

1. 元素选择器 (p)
2. 类选择器 (.highlight)
3. ID 选择器 (#special)

示例

<p id="intro" class="text">Hello</p>

p {
  color: blue;
}
.text {
  color: green;
}
#intro {
  color: red;
}

结果： 文本为 红色，因为 ID 选择器拥有最高的优先级。

快速记忆法

• ID 胜过 Class
• Class 胜过 Element
• 更具体的胜过不太具体的

实用示例

示例 1 – 简单博客文章

/* All paragraphs */
p {
  line-height: 1.6;
  color: #333;
}

/* Main heading */
h1 {
  font-size: 36px;
  color: #000;
}

/* Highlighted quotes */
.quote {
  background-color: #f0f0f0;
  border-left: 4px solid blue;
  padding: 10px;
}

/* Author section */
#author {
  font-style: italic;
  color: gray;
}

示例 2 – 导航菜单

/* Style all nav links */
nav a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

/* Active link */
.active {
  background-color: blue;
}

示例 3 – 卡片布局

/* All cards */
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
}

/* Card titles */
.card h2 {
  color: #333;
  margin-bottom: 10px;
}

/* Card paragraphs */
.card p {
  color: #666;
  line-height: 1.5;
}

前后示例

HTML

<h1>My Website</h1>
<p>Welcome to my site.</p>
<p class="important">This is important!</p>

CSS 前（无样式）

My Website
Welcome to my site.
This is important!

CSS 后

h1 {
  color: blue;
  font-size: 32px;
}

p {
  color: gray;
}

.important {
  color: red;
  font-weight: bold;
}

结果

• “My Website” → 蓝色，32 px
• “Welcome to my site.” → 灰色
• “This is important!” → 红色，加粗

快速参考

常见初学者错误

1. 忘记类名前的点

/* Wrong */
highlight {
  color: red;
}

/* Right */
.highlight {
  color: red;
}

2. 忘记 ID 前的井号

/* Wrong */
header {
  width: 100%;
}

/* Right */
#header {
  width: 100%;
}

3. 对多个元素使用 ID

<div id="box">Box 1</div>
<div id="box">Box 2</div>

ID 必须唯一；对重复的元素使用类。

摘要

• CSS 选择器 是用于定位 HTML 元素进行样式设置的方法。
• 主要类型
  • 元素 → p（所有段落）
  • 类 → .highlight（具有该类的元素）
  • ID → #special（唯一的元素）
  • 组合 → h1, h2, h3（多个选择器）
  • 后代 → div p（div 内的 p）
• 优先级： ID > Class > Element
• 记住
  • 类使用 .。
  • ID 使用 #。
  • 后代选择器使用空格。
  • 组合选择器使用逗号。

选择器是 CSS 的基础。掌握它们，你就可以为任何内容设置样式！