全部学科
JAVA后端
maven spring Mytatis SpringMVC SpringBoot java
Python全栈
python
NodeJS全栈
nodejs
通用技术
redis git docker nginx mysql zookeeper rabbitmq
Web前端
TypeScript vue CSS HTML javascript pinia vite
GO后端
golang gorm gin
小程序首页
CSS / 模拟试卷

CSS高级选择器与级联体系

20 题 45 分钟 难度：

考察知识点

  1. CSS选择器优先级与权重计算：ID、类、元素选择器权重层级，复合选择器权重计算方法
  2. !important规则的使用与注意事项：优先级层级、合理使用场景、冲突解决机制
  3. 否定伪类选择器(:not)：语法特性、权重计算、应用场景、性能考量
  4. CSS级联规则与层叠上下文：层叠上下文创建条件、z-index隔离特性、层叠顺序七层级
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
多选题

以下哪些CSS属性或值会触发创建新的层叠上下文？

A

position: relative且z-index不为auto

B

position: fixed

C

position: sticky

D

opacity值小于1

E

transform值不为none

F

filter值不为none

G

z-index: auto

H

isolation: isolate

15
多选题

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

A

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

B

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

C

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

D

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

E

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

16
填空题

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

17
单选题

页面有两个兄弟元素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

18
多选题

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

A

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

B

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

C

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

D

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

E

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

19
判断题

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

A

对

B

错

20
多选题

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

A

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

B

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

C

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

D

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

E

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

← 上一个试卷 CSS高级技能认证试卷

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

想参加完整模拟考试？
小程序提供计时考试、自动评分和详细解析

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

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