📝 1 篇文章
20 道配套习题
CSS选择器进阶
专题说明
本专题深入讲解CSS选择器的优先级计算、层叠规则和继承机制，涵盖现代CSS伪类选择器（:is、:where、:has、:not）的优先级规则，以及CSS层叠层（@layer）的使用方法。
学习目标
- 掌握CSS选择器优先级的计算方法（ID、类、元素权重体系）
- 理解现代CSS伪类选择器（:is、:where、:has、:not）的优先级规则
- 熟悉CSS层叠规则和继承机制
- 学会使用@layer层叠层管理样式优先级
- 掌握inherit、initial、unset、revert四个全局关键字的使用场景
学习内容
- 选择器优先级权重计算（ID-类-元素三级体系）
- 复合选择器与组合选择器的优先级计算
- :is()、:where()、:has()、:not()伪类的优先级规则
- CSS层叠规则（来源、优先级、源码顺序）
- CSS继承机制与可继承属性
- inherit、initial、unset、revert关键字
- CSS层叠层（@layer）的使用
学习建议
- 先理解基础的选择器优先级计算规则，再学习现代伪类选择器
- 通过代码案例练习权重计算，掌握:is和:where的区别
- 理解inherit/initial/unset/revert四个关键字的使用场景差异
- 学习@layer层叠层时注意!important会反转优先级规则
📝 配套习题（20 题）
💡 参考答案在文末
判断题
1
通配符选择器 * 的优先级为0，因此 *.box 的优先级与 .box 相同。
2
:first-child、:last-child、:nth-child() 等结构伪类的优先级与类选择器 .class 相同（权重10）。
3
all: unset 等同于对所有属性分别设置 unset，对于可继承属性会继承父元素的值，对于不可继承属性会重置为CSS初始值。
4
unset 关键字的行为是：如果属性是可继承属性，则等同于 inherit；如果属性是不可继承属性，则等同于 initial。
单选题
5
以下关于 :not() 伪类选择器的优先级说法，正确的是？
B
:not(.class) 的优先级等于 .class 的优先级
C
:not(#id, .class) 的优先级等于 #id 的优先级
6
以下CSS选择器的优先级从高到低排列正确的是？
text
A. .box .title
B. #container .item
C. div p span
D. .nav:hover
A
color、font-size 等文本属性默认可继承
B
border、margin、padding 等盒模型属性默认不可继承
C
使用 inherit 关键字可以让任何属性强制继承父元素的值
8
分析以下代码，<span> 元素的最终字体大小是多少？
HTML
<style>
body { font-size: 16px; }
.container { font-size: 1.5em; }
.box { font-size: inherit; font-size: 20px; }
</style>
<body>
<div class="container">
<div class="box">
<span>Hello</span>
</div>
</div>
</body>
9
分析以下代码，<span> 元素的最终颜色是什么？
HTML
<style>
:root { --color: red; }
#container { color: blue; }
.box { color: var(--color); }
div#container { color: green; }
body :is(#container) .box { color: purple; }
</style>
<body>
<div id="container" class="box">
<span>Hello</span>
</div>
</body>
10
分析以下代码，<p> 元素的最终颜色是什么？
HTML
<style>
body { color: red; }
.container { all: initial; color: blue; }
.container p { color: inherit; }
</style>
<body>
<div class="container">
<p>Hello</p>
</div>
</body>
11
关于 revert 和 initial 关键字的区别，以下说法正确的是？
A
revert 将属性重置为CSS规范定义的初始值
C
对于 display 属性，revert 会恢复为浏览器默认的 block 或 inline
D
revert 和 initial 的效果完全相同
12
分析以下代码，最终 <div> 的文字颜色是什么？
HTML
<style>
#title { color: blue; }
.title { color: red; }
div.title { color: green; }
</style>
<div id="title" class="title" style="color: orange;">Hello</div>
多选题
B
用户样式（用户自定义CSS）的优先级高于作者样式（网页开发者CSS）
C
带 !important 的用户样式优先级高于带 !important 的作者样式
D
相同来源、相同优先级时，后声明的规则覆盖先声明的规则
E
initial 关键字会将属性重置为浏览器默认值
A
.container .box 和 .wrapper .box 的优先级相同
C
:is(.a, .b) 选择器的优先级等于 .a 和 .b 中优先级最高的那个
D
:where(.a, .b) 选择器的优先级为0，不参与优先级计算
E
内联样式 !important 与ID选择器 !important 优先级相同
15
关于现代CSS伪类选择器的优先级，以下说法正确的是？
A
:is(.a, #b) 的优先级等于 #b 的优先级
B
:where(.a, #b) 的优先级为0，无论参数是什么
C
:has(.a) 的优先级等于 .a 的优先级
D
:nth-child(2 of .item) 的优先级等于 .item 的优先级
E
:is() 和 :where() 的参数优先级计算规则相同
填空题
17
计算以下选择器的权重（按"ID,类,元素"格式填写，如"1,2,3"表示1个ID、2个类、3个元素）：
#header .nav ul li a 的权重是 ____________body .container .wrapper div span 的权重是 ____________#app :is(.main, #sidebar) .content 的权重是 ____________
18
计算以下选择器的权重（按"ID,类,元素"格式填写）：
article :not(:first-child) p 的权重是 ____________:is(#header, .nav) .menu :where(.item) 的权重是 ____________div:has(> img.active) 的权重是 ____________
19
CSS @layer 规则用于定义层叠层，请填写以下规则的作用：
@layer base, theme; 定义了 ____________，base层的优先级低于theme层。- 在
@layer 内定义的样式，其优先级 ____________ 没有 @layer 包裹的同优先级样式。 - 使用
@layer 重新声明层顺序时，____________ 影响已定义的样式规则。
20
关于CSS层叠层（@layer）和优先级，请填写以下规则：
- 在
@layer base 内的样式优先级 ____________ 同优先级的非层叠样式。 - 多个层叠层的优先级顺序由 ____________ 决定，先声明的层优先级更低。
!important 声明的优先级规则会 ____________ ，层叠层内的 !important 优先级高于非层叠的 !important。
参考答案
1.正确
2.正确
3.正确
4.正确
5.D
6.A
7.D
8.C
9.D
10.B
11.C
12.D
13.A;C;D;E
14.A;B;C;D
15.A;B;C;D
16.A;B;C;E
17.1,1,3;0,2,3;2,1,0
18.0,1,2;1,1,0;0,1,1
19.两个层叠层的顺序;低于;不会
20.低于;声明顺序;反转
想在手机上练习这套专题？
使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码
