CSS 模拟试卷
CSS选择器专题测试
- 基础选择器：标签选择器、类选择器、ID选择器的语法和使用场景
- 伪类选择器：交互状态伪类（:hover、:active、:focus）、结构伪类（:nth-child等）
- 伪元素选择器：::before、::after的使用方法
- 组合选择器：后代选择器、子选择器、相邻兄弟选择器
- 属性选择器：属性匹配的各种方式（完全匹配、开头匹配、结尾匹配等）
- 优先级与继承：权重计算、继承规则、!important使用
试卷习题（20 题）
参考答案在文末判断题
1
判断题
一个HTML元素可以同时拥有多个class类名，用空格分隔，如 <div class="box container active">。
2
判断题
CSS中，color（颜色）、font-size（字体大小）属性会自动从父元素继承到子元素，而margin、padding、border等盒模型属性不会继承。
3
判断题
使用::before或::after伪元素时，必须设置content属性，否则伪元素不会显示。
单选题
4
单选题
伪元素选择器和伪类选择器的语法区别是什么？
5
单选题
以下哪个是CSS属性选择器？
6
单选题
CSS ID选择器的语法是以什么符号开头？
7
单选题
ID选择器和类选择器的主要区别是什么？
8
单选题
以下哪个是CSS伪类选择器？
9
单选题
以下哪个是标签选择器（元素选择器）？
10
单选题
CSS选择器的主要作用是什么？
11
单选题
CSS优先级权重从高到低的正确顺序是？
12
单选题
CSS类选择器的语法是以什么符号开头？
13
单选题
CSS后代选择器的语法格式是什么？
14
单选题
div > p 选择器会选择哪些元素？
多选题
15
多选题
以下哪些是CSS结构伪类选择器？
填空题
16
填空题
常用的交互状态伪类选择器：
- 鼠标悬停状态使用
- 链接被点击激活状态使用
- 元素获得焦点状态使用
17
填空题
属性选择器的匹配方式：
- 选择有指定属性的元素：
- 选择属性值完全匹配的元素：
- 选择属性值包含指定词的元素：
18
填空题
常用的伪元素选择器：
- 在元素内容前插入内容使用
- 在元素内容后插入内容使用
19
填空题
CSS选择器优先级权重：
- 内联样式权重为
- ID选择器权重为
- 类选择器权重为
- 标签选择器权重为 1
20
填空题
HTML元素 <div class="box">内容</div>，对应的CSS类选择器写法为 。
参考答案
1.正确
2.正确
3.正确
4.B
5.C
6.A
7.C
8.B
9.C
10.B
11.A
12.B
13.B
14.B
15.A;B;C;E
16.:hover;:active;:focus
17.[disabled];[type="checkbox"];[class~="active"]
18.::before;::after
19.1000;100;10
20..box
