核心 · 前端第 3 课 / 共 8 课免费阅读

选择器与层叠 · 前端：HTML、CSS 与 JavaScript

两条 CSS 规则冲突时，听谁的？

为什么需要它

CSS 决定一切长什么样。真实的网站里，很多规则会同时作用在同一个元素上：基础样式、组件样式、特殊情况。颜色不对的时候，原因几乎总是层叠规则，搞懂它，瞎猜就变成了快速修复。

直觉理解

一条 CSS 规则用选择器选中元素，然后设置属性：

h1 { color: tomato; }

选择器	选中
`p`	所有 `<p>`
`.note`	所有 `class="note"` 的元素
`#intro`	`id="intro"` 的那个元素
`nav a`	`nav` 里面任意一层的 `a`
`ul > li`	`ul` 的直接子元素 `li`

好几条规则给同一个元素设置同一个属性时，浏览器按这个顺序决定：

优先级（特异性）：先数 id，再数 class，最后数标签。#intro（1,0,0）胜过 .note（0,1,0），胜过 p（0,0,1）。p.note 是（0,1,1），胜过 .note。
顺序：打平时，写在后面的规则胜出。
行内的 style="…" 胜过前两者，!important 胜过一切。尽量别用：它们会让下一次修改更难。

有些属性会继承：父元素上设置的 color、font-family 会传给里面的文字。border、padding 这类盒子属性不会继承。

定义

选择器

The part before { } that says which elements a rule applies to.
{ } 前面的部分，说明这条规则作用在哪些元素上。

优先级（特异性）

A score (ids, classes, tags) that decides between rules aimed at the same element. Higher wins; on a tie the later rule wins.
一个分数（id 数, class 数, 标签数），用来在作用于同一元素的规则之间做裁决。分高者胜；打平时后写的胜。

继承

Text properties such as color and font-family pass from a parent element to the elements inside it, unless they set their own.
color、font-family 这类文字属性会从父元素传给里面的元素，除非里面的元素自己设置了。

示例

三条规则，一个段落

在互动课里运行

三条规则都选中了这个段落。由优先级决定。

<style>
  p { color: grey; }
  #tip { color: green; }
  .note { color: navy; }
</style>
<p id="tip" class="note">Drink water.</p>

逐步执行

L2选中了：分数（0,0,1）。
L3选中了：分数（1,0,0），最高。
L4选中了：分数（0,1,0）。它比 #tip 写得晚，但顺序只在打平时才有用。
L6段落是绿色的。

继承与不继承

在互动课里运行

颜色传给了 span；边框没有。

<style>
  .box { color: purple; border: 2px solid black; }
</style>
<div class="box">
  Outer text and <span>a span inside</span>
</div>

逐步执行

L2两个属性都只设置在 div 上。
L5span 自己没有规则：它的文字是紫色（继承来的），但它自己没有边框。

常见错误

用 !important 硬压

用一次有效，下次修改就得再来一个 !important。应该把选择器写得更具体，或者把规则理清楚。

以为后写的总是赢

只有优先级相同时，后写的规则才会赢。最后写的 .note 依然输给最先写的 #tip。

用 id 写样式

一个 id 在页面上只能用一次，而且优先级太高，很难覆盖。写样式优先用 class。

小测验

1. 哪个选择器优先级最高？

A#menu
B.menu a
Cnav ul li a

查看答案

答案：A

一个 id（1,0,0）胜过任意数量的 class 和标签。

2. `.note { color: red }` 在前，`p.note { color: blue }` 在后。`<p class="note">` 是什么颜色？

Ablue
Bred
C看浏览器

查看答案

答案：A

p.note 的分数是（0,1,1），比 .note 的（0,1,0）高。

动手练习

3 道练习，分三层：先预测程序的输出，再按新需求改程序，最后从零写一个。代码在浏览器里运行，提交马上判题。

预测输出谁赢了？
这个标题是什么颜色？
改需求让警告变红
警告应该是红色，现在却是灰色。修改 CSS，让它变红，同时第一条笔记保持灰色。不要用 !important，也不要用 style= 属性。
从零写给价目表加样式
在 <style> 里写 CSS，做到：
- 整个列表使用字体 Georgia
- 每个 .price 都是粗体（bold）
- 打折商品（li.sale）的价格是红色（red）；其他价格保持默认颜色

在互动课里练这一课

打开互动课，这些例子都能直接改、直接运行，练习题提交马上判题。免费开始，不用注册。

打开互动课课程地图

互动课按顺序解锁：前面的课还没学，会先带你到课程地图。

本课术语

术语	中文	英文定义
CSS	CSS	Cascading Style Sheets: the rules that decide how HTML looks.
Selector	选择器	The pattern that picks which elements a CSS rule applies to.
Specificity	优先级（特异性）	The (ids, classes, tags) score that decides between conflicting rules.
Cascade	层叠	The rules a browser uses to pick one value when several CSS rules conflict.