全部学科
通用技术
redis git docker nginx mysql zookeeper rabbitmq
GO后端
golang gorm gin
JAVA后端
maven spring Mytatis SpringMVC SpringBoot java
Web前端
TypeScript vue CSS HTML javascript pinia vite
NodeJS全栈
nodejs
Python全栈
python
小程序首页
CSS / 专题
📝 1 篇文章 20 道配套习题

CSS选择器进阶

专题说明

本专题深入讲解CSS选择器的优先级计算、层叠规则和继承机制，涵盖现代CSS伪类选择器（:is、:where、:has、:not）的优先级规则，以及CSS层叠层（@layer）的使用方法。

学习目标

  1. 掌握CSS选择器优先级的计算方法（ID、类、元素权重体系）
  2. 理解现代CSS伪类选择器（:is、:where、:has、:not）的优先级规则
  3. 熟悉CSS层叠规则和继承机制
  4. 学会使用@layer层叠层管理样式优先级
  5. 掌握inherit、initial、unset、revert四个全局关键字的使用场景

学习内容

  • 选择器优先级权重计算（ID-类-元素三级体系）
  • 复合选择器与组合选择器的优先级计算
  • :is()、:where()、:has()、:not()伪类的优先级规则
  • CSS层叠规则（来源、优先级、源码顺序）
  • CSS继承机制与可继承属性
  • inherit、initial、unset、revert关键字
  • CSS层叠层（@layer）的使用

学习建议

  1. 先理解基础的选择器优先级计算规则，再学习现代伪类选择器
  2. 通过代码案例练习权重计算，掌握:is和:where的区别
  3. 理解inherit/initial/unset/revert四个关键字的使用场景差异
  4. 学习@layer层叠层时注意!important会反转优先级规则

📝 发现内容有误？点击此处直接编辑

📝 配套习题（20 题）

1
单选题

以下CSS选择器的优先级从高到低排列正确的是？

text
A. .box .title
B. #container .item
C. div p span
D. .nav:hover
A

B > A > D > C

B

B > D > A > C

C

A > B > D > C

D

D > B > A > C

2
单选题

分析以下代码，最终 <div> 的文字颜色是什么？

HTML
<style>
  #title { color: blue; }
  .title { color: red; }
  div.title { color: green; }
</style>
<div id="title" class="title" style="color: orange;">Hello</div>
A

blue

B

red

C

green

D

orange

3
多选题

关于CSS选择器优先级，以下说法正确的是？

A

.container .box 和 .wrapper .box 的优先级相同

B

div.box 的优先级高于 .box

C

:is(.a, .b) 选择器的优先级等于 .a 和 .b 中优先级最高的那个

D

:where(.a, .b) 选择器的优先级为0，不参与优先级计算

E

内联样式 !important 与ID选择器 !important 优先级相同

4
单选题

分析以下代码，<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>
A

red

B

blue

C

green

D

purple

5
判断题

通配符选择器 * 的优先级为0，因此 *.box 的优先级与 .box 相同。

A

对

B

错

6
填空题

计算以下选择器的权重（按"ID,类,元素"格式填写，如"1,2,3"表示1个ID、2个类、3个元素）：

  1. #header .nav ul li a 的权重是 ______
  2. body .container .wrapper div span 的权重是 ______
  3. #app :is(.main, #sidebar) .content 的权重是 ______
7
单选题

以下关于CSS继承的说法，错误的是？

A

color、font-size 等文本属性默认可继承

B

border、margin、padding 等盒模型属性默认不可继承

C

使用 inherit 关键字可以让任何属性强制继承父元素的值

D

width 和 height 属性默认可继承

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>
A

16px

B

24px

C

20px

D

30px

9
多选题

关于CSS层叠规则，以下说法正确的是？

A

用户代理样式（浏览器默认样式）的优先级最低

B

用户样式（用户自定义CSS）的优先级高于作者样式（网页开发者CSS）

C

带 !important 的用户样式优先级高于带 !important 的作者样式

D

相同来源、相同优先级时，后声明的规则覆盖先声明的规则

E

initial 关键字会将属性重置为浏览器默认值

10
判断题

unset 关键字的行为是：如果属性是可继承属性，则等同于 inherit；如果属性是不可继承属性，则等同于 initial。

A

对

B

错

11
单选题

分析以下代码，<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>
A

red

B

blue

C

黑色（初始值）

D

无颜色（继承失败）

12
填空题

CSS @layer 规则用于定义层叠层，请填写以下规则的作用：

  1. @layer base, theme; 定义了 ________________，base层的优先级低于theme层。
  2. 在 @layer 内定义的样式，其优先级 ______ 没有 @layer 包裹的同优先级样式。
  3. 使用 @layer 重新声明层顺序时，______ 影响已定义的样式规则。
13
单选题

以下关于 :not() 伪类选择器的优先级说法，正确的是？

A

:not() 本身的优先级为0，不影响总权重

B

:not(.class) 的优先级等于 .class 的优先级

C

:not(#id, .class) 的优先级等于 #id 的优先级

D

以上说法都正确

14
多选题

关于现代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() 的参数优先级计算规则相同

15
判断题

:first-child、:last-child、:nth-child() 等结构伪类的优先级与类选择器 .class 相同（权重10）。

A

对

B

错

16
填空题

计算以下选择器的权重（按"ID,类,元素"格式填写）：

  1. article :not(:first-child) p 的权重是 ______
  2. :is(#header, .nav) .menu :where(.item) 的权重是 ______
  3. div:has(> img.active) 的权重是 ______
17
单选题

关于 revert 和 initial 关键字的区别，以下说法正确的是？

A

revert 将属性重置为CSS规范定义的初始值

B

initial 将属性重置为浏览器默认样式

C

对于 display 属性，revert 会恢复为浏览器默认的 block 或 inline

D

revert 和 initial 的效果完全相同

18
多选题

以下CSS属性中，默认可继承的有哪些？

A

color

B

font-size

C

visibility

D

background-color

E

line-height

19
判断题

all: unset 等同于对所有属性分别设置 unset，对于可继承属性会继承父元素的值，对于不可继承属性会重置为CSS初始值。

A

对

B

错

20
填空题

关于CSS层叠层（@layer）和优先级，请填写以下规则：

  1. 在 @layer base 内的样式优先级 ______ 同优先级的非层叠样式。
  2. 多个层叠层的优先级顺序由 ________ 决定，先声明的层优先级更低。
  3. !important 声明的优先级规则会 ______ ，层叠层内的 !important 优先级高于非层叠的 !important。
← 上一个专题 CSS选择器专题
下一个专题 → CSS预处理器（Sass、Less）

📝 发现内容有误？点击此处直接编辑

想查看更多习题和详细解析？
小程序提供完整的题库和详细解析

长按或扫描二维码，立即体验

扫码体验小程序
马上就来
使用微信扫描二维码
立即体验完整题库