全部学科

Web前端

TypeScript vue CSS HTML javascript pinia vite

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

通用技术

redis git docker nginx mysql zookeeper rabbitmq

Python全栈

NodeJS全栈

GO后端

golang gorm gin

小程序首页

📝 1 篇文章 20 道配套习题

CSS高级选择器与级联体系

专题说明

本专题深入讲解CSS选择器的优先级计算、权重规则、!important使用策略、否定伪类:not的特性、以及层叠上下文与z-index的复杂关系。掌握这些核心概念，能够精准控制样式覆盖、解决复杂的样式冲突问题。

学习目标

理解CSS选择器权重计算规则（A级、B级、C级）
掌握!important的正确使用场景和冲突解决机制
熟练运用:not伪类选择器进行反向选择
深入理解层叠上下文的创建条件与隔离特性
掌握z-index在不同层叠上下文中的行为规则

学习内容

选择器权重分级与计算方法
内联样式与!important的优先级层级
:not伪类的语法、权重计算与性能特性
层叠上下文的创建条件与七层渲染顺序
z-index生效条件与层叠上下文隔离原理

学习建议

建议先掌握基础选择器知识，再深入学习本专题。重点关注权重计算方法和层叠上下文隔离特性，这是解决样式冲突和z-index问题的核心。多做权重计算练习，理解"为什么z-index不生效"的根本原因。

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

📝 配套习题（19 题）

1

单选题

CSS选择器优先级权重计算规则中，以下权重分配正确的是？

A

ID选择器100分，类选择器10分，元素选择器1分

B

ID选择器权重最高，其次是类选择器，最后是元素选择器，按出现数量累加

C

所有选择器权重相同，按CSS规则出现顺序决定优先级

D

内联样式权重最低，外部样式权重最高

2

多选题

以下CSS选择器中，哪些属于B级权重（类/属性/伪类级别）？

A

.class

B

#id

C

[type="text"]

D

:hover

E

::before

F

div

G

:not(.active)

3

单选题

以下CSS选择器，哪个权重最高？

A

div#content .article p

B

#content .article p.warning

C

#content div.article p.warning.highlight

D

article#content p.warning

4

填空题

CSS选择器#header .nav ul li a.active:hover的权重计算结果为：______个A级权重（ID选择器）、______个B级权重（类选择器和伪类）、______个C级权重（元素选择器）。

5

判断题

内联样式（style属性）的权重高于所有CSS选择器定义的样式，只有!important可以覆盖内联样式。

A

对

B

错

6

单选题

CSS中!important的作用是什么？

A

提升选择器的权重，使其高于内联样式

B

声明该样式规则优先级最高，覆盖同属性的所有其他声明

C

确保样式规则不被后续CSS覆盖

D

加速浏览器解析CSS，提高渲染性能

7

多选题

当多个!important声明冲突时，CSS如何决定最终生效的样式？

A

所有!important声明权重相同，无法区分

B

按选择器权重比较，权重高的!important生效

C

选择器权重相同时，后出现的!important生效

D

内联!important高于选择器!important

E

用户样式表!important高于作者样式表!important

8

填空题

CSS优先级层级中，________________________具有最高优先级，其次是________________________，然后是内联样式，最后是选择器定义的样式。

9

单选题

CSS选择器:not(.active)的权重是多少？

A

权重为0，因为:not本身不增加权重

B

权重为B级（1,0,0），由内部的.active类选择器决定

C

权重取决于:not匹配的元素数量

D

权重高于普通类选择器，因为:not是特殊伪类

10

多选题

关于CSS :not伪类选择器，以下哪些说法是正确的？

A

:not可以接受多个选择器参数，如:not(.a, .b)

B

:not可以嵌套使用，如:not(:not(.active))

C

:not可以匹配任何非指定选择器的元素

D

:not内部不能使用复合选择器

E

:not选择器可以与其他选择器组合使用

11

填空题

CSS :not伪类常用于选择"非"指定条件的元素，例如选择除最后一个元素外的所有元素可以用_________________，选择没有disabled属性的按钮可以用________________。

12

判断题

:not伪类选择器比普通类选择器性能开销更大，应避免在大型项目中使用。

A

对

B

错

13

单选题

CSS层叠上下文（Stacking Context）的核心作用是什么？

A

决定元素在DOM树中的层级位置

B

创建独立的渲染层，决定元素及其子元素的z-index排序范围

C

控制元素的层叠顺序，使其在视觉上位于其他元素上方

D

管理CSS规则的优先级，解决样式冲突问题

14

多选题

关于z-index和层叠上下文的关系，以下哪些说法正确？

A

z-index只在同一层叠上下文内比较

B

子元素的z-index高于父元素层叠上下文的所有兄弟元素

C

不设置z-index的定位元素按DOM顺序渲染

D

z-index: auto不创建新的层叠上下文

E

创建层叠上下文的元素本身有base z-index参与父上下文的排序

15

填空题

CSS层叠顺序从下到上分为七个层级：背景和边框→_________→块级元素→________→行内元素→_________→层叠上下文内部元素。

16

单选题

页面有两个兄弟元素A和B，A设置了position: relative; z-index: 1，B设置了position: relative。A内部有子元素C设置了z-index: 9999。请问C能否显示在B上方？

A

能，因为C的z-index=9999远大于任何元素的z-index

B

不能，因为C被困在A的层叠上下文内，A作为整体与B比较

C

能，因为子元素的z-index不受父元素限制

D

不能，因为A的z-index=1低于B

17

多选题

CSS属性isolation: isolate的作用和使用场景是什么？

A

创建新的层叠上下文，不影响元素的其他样式

B

与设置z-index: 0创建层叠上下文效果相同

C

用于防止元素内部z-index影响外部元素的渲染层级

D

常用于需要与外部元素隔离的组件或模块

E

会触发硬件加速，提升渲染性能

18

判断题

只有设置了position属性（值为relative、absolute、fixed、sticky）的元素才能使用z-index控制层叠顺序。

A

对

B

错

19

多选题

will-change属性与层叠上下文的创建有什么关系？

A

will-change: transform会创建新的层叠上下文

B

will-change: opacity会创建新的层叠上下文

C

will-change不创建层叠上下文，只创建合成层

D

will-change创建的层叠上下文会影响子元素的z-index隔离

E

设置will-change的元素会脱离文档流

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

想查看更多习题和详细解析？

小程序提供完整的题库和详细解析

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