第二章 · 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;
}

效果预览

.btn-primary

ID 选择器

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

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

分组选择器

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

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

小结

选择器	语法	说明
通配符	*	匹配所有元素
标签	p	匹配指定标签
类	.name	匹配 class 包含 name 的元素，可复用
ID	#name	匹配 id 为 name 的唯一元素
分组	a, b	同时匹配 a 与 b，共享样式

Chapter 2 · Section 2.1

Basic Selectors

Selectors are the bridge between CSS and HTML: they tell the browser "which elements this rule should apply to". This section introduces the four most basic ways to select — universal, type, class, and ID — which are the building blocks of almost every complex selector.

The Universal Selector `*`

* matches any element in the document, often used to clear the browser's default margins and padding.

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

TipThe performance cost of the universal selector is nearly negligible in modern browsers, but it is still advisable to use it only in a few "reset" scenarios to avoid masking where styles really come from.

Type Selectors

Using an HTML tag name directly as the selector matches every element of that type on the page.

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

Class Selectors

Starting with a period ., it matches every element whose class attribute contains that name. An element can have several classes; this is the most common selection method in component-based development.

<button class="btn btn-primary">Confirm</button>

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

Live preview

.btn-primary

ID Selectors

Starting with #, it matches the element with the corresponding id attribute. Because an id is theoretically unique on a page, ID selectors have far higher specificity than class selectors (see 2.2 Combinators and Specificity). In component-based projects, it is usually recommended to style with class selectors only and leave id for anchor jumps and JavaScript hooks.

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

Grouping Selectors

Joining several selectors with commas shares one set of style declarations across them, effectively reducing duplicated code.

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

Summary

Selector	Syntax	Description
Universal	*	Matches every element
Type	p	Matches the given tag
Class	.name	Matches elements whose class contains name; reusable
ID	#name	Matches the unique element with id name
Grouping	a, b	Matches both a and b, sharing styles