CSS选择器专题测试
考察知识点
- 基础选择器：标签选择器、类选择器、ID选择器的语法和使用场景
- 伪类选择器：交互状态伪类（:hover、:active、:focus）、结构伪类（:nth-child等）
- 伪元素选择器：::before、::after的使用方法
- 组合选择器：后代选择器、子选择器、相邻兄弟选择器
- 属性选择器：属性匹配的各种方式（完全匹配、开头匹配、结尾匹配等）
- 优先级与继承：权重计算、继承规则、!important使用
💡 参考答案在文末
判断题
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
想在手机上练习这套试卷？
使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码
