CSS选择器修炼手册

Links

• https://www.w3schools.com/cssref/trysel.php，在线测试各种 CSS 选择器的效果。
• The truth about CSS selector performance CSS 选择器性能分析

Basic Selectors

HTML 里的元素可以有多种属性:

• Element Type：元素的类型，例如 div、p、h1 等
• Class：类名，可以有多个类名，用空格分隔，例如class="title is-3"
• ID：唯一标识符，例如 id="main-title"

CSS 选择器可以根据这些属性来筛选元素。

Single Selectors

例如下面的元素，其元素类型为 h1，类名为 title 和 is-3，ID 为 main-title

HTML Demo

<h1 class="title is-3" id="main-title">
  Hello World
</h1>
<a href="https://example.com" title="Example Site">
  Example
</a>
<button class="is-blue">Click Me</button>

CSS Demo

.is-blue {}
#main-title {}
[title="Example Site"] {}

Selector	Example	Description
element	p, h1	类型为p或h1的元素
.class	.title, .is-3	具有title或is-3类名的元素
#id	#main-title	具有main-title ID 的元素
[attr=val]	[required],[type="text"]	具有required属性或type属性为text的元素
*	*	选择所有元素。

对于属性选择器，除了使用 [attr=value] 进行精准匹配，还可使用以下方式进行更灵活的匹配：

• ~=：属性值中包含某个单词（以空格分隔）
• |=：连字符匹配，如 [lang|="en"] ，即属性值为 en 或以 en- 开头
• ^=：属性值以某字符串开头
• $=：属性值以某字符串结尾
• *=：属性值包含某字符串

Selector list

如果想同时为多种选择器应用相同的样式，可以使用逗号 , 将它们分隔开来。

h1,
.title {
  color: blue;
}

Selector	Example	Description
,	h1, .title	同时为 h1 元素和具有 title 类名的元素应用样式

Combination Selectors

也可将基础选择器进行组合，缩小定位范围，更专业一点的说法是提高“选择器的特异性”（Specificity）

HTML Demo

<div class="card is-shadowed">
  <h1 class="title">Card Title</h1>
  <p>This is some card content.</p>
  <input type="text" required />
</div>

CSS Demo

h1.title {}
input[required] {}

Selector	Example	Description
element.class	h1.title	选择既是 h1 元素又包含 title 类名的元素
.class1.class2	.title.is-3	选择同时拥有 title 和 is-3 类名的元素
element[attr=value]	input[required]	选择既是 input 元素又拥有 required 属性的元素

Combinators

DOM 是一个树状结构，HTML 元素之间存在父子关系、兄弟关系等。对于 A,B，可以有以下几种关系：

• Descendant：B 在 A 内部的任意层级位置，使用A B表示
  • Child：B 在 A 的下一层级位置，使用 A > B 表示
• General Sibling：B 和 A 具有相同的父元素，且 B 在 A 之后，使用A ~ B表示
  • Adjacent Sibling：两者具有相同的父元素且 B 紧跟在 A 之后，使用A + B表示

CSS 嵌套语法糖

CSS 预处理器（如 Sass、Less）以及一些现代 CSS 框架支持嵌套语法糖，后面 CSS 也支持了这种写法，可以更直观地表达层级关系。其中，& 表示父选择器本身。

Before

.card { background: #fff; }
.card > h1 { font-size: 30px; }
.card p { color: #666; }
.card + .card { margin-top: 20px; }
.card.is-shadowed { border-color: blue; }

With Syntax Sugar

.card {
  background: #fff;
  > h1 { font-size: 30px; }
  p { color: #666; }
  & + .card { margin-top: 20px; }
  &.is-shadowed { border-color: blue; }
}

Pseudo

Pseudo-classes

伪类选择器¹用于选择处于特定状态的元素，例如鼠标悬停、已访问链接等。

• :hover: 当鼠标悬停在元素上时应用样式
• :focus: 当元素获得焦点时应用样式
• …

Pseudo-elements

伪元素选择器²用于对所选元素的特定部分进行样式设置，例如段落的首字母、内容的开头或结尾等。

• ::before: 在元素内容之前插入内容
• ::after: 在元素内容之后插入内容
• …

At-rules

CSS 还支持一些特殊的 @ 规则，用于定义媒体查询、字体导入等。

@media

@media选择器可以根据不同的设备或屏幕尺寸应用不同的样式规则，以实现响应式设计。

语法 @media (condition) <mediatype> and (expression) { /* CSS Rules */ }

• 常用媒体类型 (Media Types)

  • screen: 用于电脑屏幕、平板电脑和智能手机（最常用）。
  • print: 用于打印机和打印预览模式。
  • all: 默认值。用于所有媒体类型设备。

• 常用媒体特性 (Media Features)

  • max-width: 如果视口<=此宽度，则应用样式
  • min-width: 如果视口>=此宽度，则应用样式
  • orientation: 检测设备处于 landscape（横屏，宽 > 高）还是 portrait（竖屏，高 > 宽）模式。

/* 基础样式 (移动优先) */
.container {
  width: 40px;
}
/* 大型设备 (桌面电脑 - 992px 及以上) */
@media only screen and (min-width: 992px) {
  .container {
    width: 960px;
  }
}

Footnotes

1. Pseudo-classes - CSS | MDN ↩

2. Pseudo-elements - CSS | MDN ↩