CSS Id 和 Class 选择器

除了用「标签名」选中元素，我们还可以用 id 和 class 来更精确地选中某一个或某一类元素，并单独给它们写样式。

Class 选择器（类选择器）

class 用来给元素「分类」，同一 class 可以出现在多个元素上。在 CSS 里用 . 加类名来选中。

HTML 中给元素加 class

<p class="intro">第一段是引言。</p>
<p>这是普通段落。</p>
<p class="intro">另一段引言。</p>

CSS 中写类选择器

.intro {
  color: gray;
  font-style: italic;
}

• 选择器 .intro 表示：所有 class="intro" 的元素。
• 上面两个带 class="intro" 的段落都会变成灰色斜体，没有 class 的段落不受影响。

一个元素多个 class

一个元素可以有多个 class，用空格分开：

<p class="intro highlight">既是引言又被高亮。</p>

.intro { font-style: italic; }
.highlight { background: yellow; }

两个类的样式会同时作用在这个段落上。

命名建议

• 用小写字母、数字、连字符，如 card-title、text-muted。
• 名字要有含义，方便以后维护。

---

Id 选择器

id 用来表示页面里「唯一」的一个元素（同一页面上不应出现两个相同 id）。在 CSS 里用 # 加 id 名来选中。

HTML 中给元素加 id

<div id="header">页头</div>
<main id="main-content">主内容</main>

CSS 中写 Id 选择器

#header {
  background: #333;
  color: white;
}

#main-content {
  max-width: 800px;
  margin: 0 auto;
}

• #header 只作用于 id="header" 的那一个元素。
• #main-content 只作用于 id="main-content" 的那一个元素。

---

Class 和 Id 怎么选？

场景	更合适的选择
多个元素样式相同	用 class
页面里只有一个的元素（如页头、主内容容器）	用 id 也可以，但用 class 同样可以
需要被 JavaScript 选中的「唯一」元素（如弹窗、表单）	常用 id
只做样式、可复用	用 class

建议：

• 做样式时优先用 class，方便复用和组合。
• id 留给「唯一」且常被 JS 选中的结构，并保证同一页面不重复。

---

选择器组合示例

• 只选中「带有 class="box" 的 div」：

div.box {
  border: 1px solid #ccc;
}

• 只选中「id="sidebar" 里的段落」：

#sidebar p {
  font-size: 14px;
}

这些在「组合选择符」一节会系统学习。

---

小结

• Class 选择器：.类名，可复用，多个元素共享同一 class。
• Id 选择器：#id名，同一页面应唯一，常用于唯一结构或 JS 操作。
• 做样式优先用 class；id 注意不要重复。
• 一个元素可以有多个 class，用空格分隔。

下一节我们将学习 CSS 创建：如何把 CSS 写进 HTML（内联、内部、外部），以及如何组织文件。