CSS 选择器（一）

上一篇讲了语法，选择器负责回答一个关键问题，这条样式写给谁。这一篇介绍三种最基础的选择器，标签选择器、类选择器、ID 选择器，它们能覆盖日常绝大部分需求。

标签选择器

标签选择器直接写 HTML 的标签名，选中页面上所有该标签的元素。

p {
  color: #333;
}
h1 {
  font-size: 28px;
}

上面的规则让所有 p 变灰，所有 h1 变大。标签选择器写法最简单，但范围也最广，一竿子打翻一船人。页面上如果有一段 p 想与众不同，它做不到。所以它适合做全局的默认样式，比如统一所有段落的行距、统一所有链接的颜色。

类选择器用点号开头，选中所有带有指定 class 的元素。

<p class="warning">这是一条警告</p>
<p>这是普通段落</p>

.warning {
  color: #c0392b;
  font-weight: bold;
}

只有带 class=”warning” 的那个段落会变成红色加粗。类选择器是使用频率最高的选择器，原因有两个。第一，一个类可以加在任意多个元素上，复用方便。第二，一个元素可以同时带多个类，多个类名用空格隔开，效果叠加。

<button class="btn btn-primary">确定</button>
<button class="btn">取消</button>

.btn {
  padding: 8px 16px;
  border-radius: 4px;
}
.btn-primary {
  background: #3498db;
  color: white;
}

两个按钮共享 .btn 的尺寸样式，主按钮再叠加 .btn-primary 的颜色，这就是组合，也是类选择器的精髓。

ID 选择器用井号开头，选中指定 id 的元素。id 在页面里必须唯一，一个 id 只能出现在一个元素上。

<nav id="main-nav">导航</nav>

#main-nav {
  background: #2c3e50;
}

ID 选择器的特点是唯一和精确。但它有两个问题，没法复用，页面里只能有一个；优先级还特别高，想覆盖它很费劲。所以业界的共识是，样式尽量用类选择器，id 留给 JavaScript 或者锚点跳转用，比如回到顶部的链接 href="#top"。

还有一个特殊的选择器，星号 *，它选中所有元素。

* {
  margin: 0;
  padding: 0;
}

上面的代码是经典的清零写法，去掉所有元素的默认间距。通配符很方便，但要小心，它会作用到每一个元素，包括你没想到的那些，性能上也有开销，别滥用。

类名怎么写，有个约定俗成的标准。用英文单词或词组，多个词用短横线连接，比如 sidebar、user-card、btn-primary。含义要表意，描述”它是什么”而不是”它长什么样”，nav 就比 blue-box 好。不要用拼音，不要用单字母，除非是约定好的缩写。

团队大了之后，命名容易乱，后来出现了 BEM 这类方法论，用块__元素–修饰的格式约束类名。现在知道有这回事就行，入门阶段，只要记住语义化、可读性两个词。

三种选择器的优先级是固定的，ID 最高，类其次，标签最低。

p { color: black; }
.warning { color: red; }
#main-nav { color: blue; }

同一元素被多条规则命中时，ID 的颜色压过类的，类的压过标签的。这只是层叠规则的一个角落，下一篇讲完剩下的选择器类型，再专门用一篇把层叠和优先级讲透。现在记住一句口诀，id 最大、类居中、标签垫底。