全部学科
NodeJS全栈
nodejs
Python全栈
python
小程序首页

CSS选择器专题测试

20 题 45 分钟 难度:

考察知识点

  • 基础选择器:标签选择器、类选择器、ID选择器的语法和使用场景
  • 伪类选择器:交互状态伪类(:hover、:active、:focus)、结构伪类(:nth-child等)
  • 伪元素选择器:::before、::after的使用方法
  • 组合选择器:后代选择器、子选择器、相邻兄弟选择器
  • 属性选择器:属性匹配的各种方式(完全匹配、开头匹配、结尾匹配等)
  • 优先级与继承:权重计算、继承规则、!important使用
1
单选题

CSS选择器的主要作用是什么?

A

定义CSS属性值

B

选择要应用样式的HTML元素

C

创建新的HTML元素

D

设置元素的显示顺序

2
单选题

以下哪个是标签选择器(元素选择器)?

A

.container

B

#header

C

div

D

[type="text"]

3
单选题

CSS类选择器的语法是以什么符号开头?

A

#

B

.

C

@

D

*

4
填空题

HTML元素 <div class="box">内容</div>,对应的CSS类选择器写法为 ______

5
判断题

一个HTML元素可以同时拥有多个class类名,用空格分隔,如 <div class="box container active">

A

B

6
单选题

CSS ID选择器的语法是以什么符号开头?

A

#

B

.

C

:

D

$

7
单选题

ID选择器和类选择器的主要区别是什么?

A

ID选择器优先级更低

B

ID选择器可以重复使用

C

ID选择器优先级更高,且ID在页面中唯一

D

类选择器只能用于div元素

8
单选题

以下哪个是CSS伪类选择器?

A

::before

B

:hover

C

.class

D

[attr]

9
填空题

常用的交互状态伪类选择器:

  • 鼠标悬停状态使用 ______
  • 链接被点击激活状态使用 _______
  • 元素获得焦点状态使用 ______
10
多选题

以下哪些是CSS结构伪类选择器?

A

:first-child

B

:last-child

C

:nth-child(n)

D

:hover

E

:not(selector)

11
单选题

伪元素选择器和伪类选择器的语法区别是什么?

A

伪元素使用单冒号,伪类使用双冒号

B

伪元素使用双冒号,伪类使用单冒号

C

两者都使用单冒号

D

两者都使用双冒号

12
填空题

常用的伪元素选择器:

  • 在元素内容前插入内容使用 ________
  • 在元素内容后插入内容使用 _______
13
判断题

使用::before或::after伪元素时,必须设置content属性,否则伪元素不会显示。

A

B

14
单选题

CSS后代选择器的语法格式是什么?

A

选择器之间用 > 分隔

B

选择器之间用空格分隔

C

选择器之间用 + 分隔

D

选择器之间用 ~ 分隔

15
单选题

div > p 选择器会选择哪些元素?

A

div元素内的所有p元素

B

div元素的直接子元素p

C

div元素后面紧邻的p元素

D

div元素后面的所有p兄弟元素

16
单选题

以下哪个是CSS属性选择器?

A

.class

B

#id

C

[type="text"]

D

:hover

17
填空题

属性选择器的匹配方式:

  • 选择有指定属性的元素:__________
  • 选择属性值完全匹配的元素:________________________
  • 选择属性值包含指定词的元素:________________________
18
单选题

CSS优先级权重从高到低的正确顺序是?

A

内联样式 > ID选择器 > 类选择器 > 标签选择器

B

ID选择器 > 内联样式 > 类选择器 > 标签选择器

C

类选择器 > ID选择器 > 标签选择器 > 内联样式

D

内联样式 > 类选择器 > ID选择器 > 标签选择器

19
填空题

CSS选择器优先级权重:

  • 内联样式权重为 ______
  • ID选择器权重为 ______
  • 类选择器权重为 ______
  • 标签选择器权重为 ______
20
判断题

CSS中,color(颜色)、font-size(字体大小)属性会自动从父元素继承到子元素,而margin、padding、border等盒模型属性不会继承。

A

B

← 上一个试卷 CSS盒模型
下一个试卷 → CSS预处理器(Sass、Less)专题测试

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

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

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

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