第二章 · 2.1 节

基础选择器

选择器是 CSS 与 HTML 之间的桥梁：它告诉浏览器"这条规则该套用在哪些元素上"。本节介绍四种最基础的选择方式——通配符、标签、类、ID，它们是几乎所有复杂选择器的组成部件。

通配符选择器 *

* 匹配文档中的任意元素，常用于清除浏览器默认的外边距与内边距。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

标签选择器

直接使用 HTML 标签名作为选择器，匹配页面上所有该类型的元素。

p {
  line-height: 1.6;
}
ul {
  list-style: none;
}

类选择器

以英文句点 . 开头，匹配 class 属性中包含该名称的所有元素。一个元素可以拥有多个类，这是组件化开发中最常用的选择方式。

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

.btn {
  padding: 8px 16px;
  border-radius: 4px;
}
.btn-primary {
  background: #3f5d54;
  color: #fff;
}

ID 选择器

以 # 开头，匹配拥有对应 id 属性的元素。由于一个页面中 id 理论上唯一，ID 选择器的优先级远高于类选择器（详见 2.2 组合选择器与优先级）。在组件化项目中，通常建议只用类选择器写样式，把 id 留给锚点跳转与 JavaScript 钩子。

#main-nav {
  position: sticky;
  top: 0;
}

分组选择器

用逗号将多个选择器组合在一起，共享同一组样式声明，可以有效减少重复代码。

h1, h2, h3 {
  font-family: Georgia, serif;
  font-weight: 400;
}

小结