2.2 选择器：标签、类、ID 与后代

写 CSS 规则的第一步永远是“选中谁”。选择器（selector）就是用来精确指定“这条样式作用在哪些元素上”的。这一节学最常用的四种。

下面的实验让你点不同的选择器，实时看右边哪些元素被命中（高亮）。

标签选择器：按标签名选

直接写标签名，选中页面上所有这种标签：

p { color: gray; }      /* 所有段落 */
h1 { font-size: 32px; } /* 所有一级标题 */

简单粗暴，但有时太“广”了——它会选中每一个 <p>。

类选择器：按 class 选（最常用）

给元素加 class 属性，再用点号 . 选中它。同一个类可以用在很多元素上：

<p class="warning">注意！</p>
<span class="warning">这里也是警告</span>

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

类选择器是日常写 CSS 用得最多的，因为它既精确又可复用。一个元素也可以同时有多个类：class="btn primary"。

ID 选择器：按 id 选（唯一）

给元素加 id 属性，再用井号 # 选中。关键规则：一个 id 在整个页面里只能出现一次：

<header id="top-bar">…</header>

#top-bar {
  background: black;
}

后代选择器：选“里面的”

用空格把两个选择器连起来，表示“A 里面的 B”：

nav a { color: white; }   /* 只选 nav 里面的链接 */
.card p { margin: 0; }     /* 只选 .card 里面的段落 */

注意这和“A 和 B 都选”不同——那要用逗号：h1, h2 { }（同时选 h1 和 h2）。

选择器小抄