首页/ 学科题库/ CSS/ CSS选择器专题
CSS 专题精讲

CSS选择器专题

1 篇文章 20 道配套习题

CSS选择器专题

专题说明

本专题系统讲解CSS选择器的核心知识，包括基础选择器（标签、类、ID）、属性选择器、组合选择器（后代、子代、兄弟）、伪类与伪元素选择器，以及选择器优先级计算规则。

学习目标

  1. 理解各类CSS选择器的语法与使用场景
  2. 掌握组合选择器的层级关系选择方法
  3. 熟练运用伪类和伪元素选择器
  4. 准确计算选择器优先级权重

学习内容

  • 基础选择器：标签选择器、类选择器、ID选择器
  • 属性选择器：属性存在、值匹配、前缀后缀匹配
  • 组合选择器：后代选择器、子选择器、兄弟选择器
  • 伪类选择器：交互状态伪类、结构伪类
  • 伪元素选择器：::before、::after
  • 选择器优先级与继承

学习建议

  1. 先掌握基础选择器的语法差异，再学习组合选择器
  2. 重点理解优先级权重计算方法，多做计算练习
  3. 伪类选择器注意区分交互状态类和结构类
  4. 实际编码中合理选择选择器类型，避免过度嵌套

配套习题（20 题）

参考答案在文末
判断题
1
判断题

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

A

对

B

错

2
判断题

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

A

对

B

错

3
判断题

标签选择器会选择文档中所有对应的HTML元素，无法单独选择某个特定的元素。

A

对

B

错

4
判断题

HTML页面中，同一个ID值只能在一个元素上使用，具有唯一性。

A

对

B

错

单选题
5
单选题

:nth-child(2n) 选择器会选择哪些元素？

A

所有奇数位置的子元素

B

所有偶数位置的子元素

C

第2个子元素

D

有2个子元素的父元素

6
单选题

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

A

.class

B

#id

C

[type="text"]

D

:hover

7
单选题

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

A

#

B

.

C

@

D

*

8
单选题

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

A

ID选择器优先级更低

B

ID选择器可以重复使用

C

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

D

类选择器只能用于div元素

9
单选题

当多个选择器设置同一元素的同一属性产生冲突时，以下哪种情况优先级最高？

A

ID选择器设置的样式

B

内联style属性设置的样式

C

带!important声明的样式

D

最后在CSS文件中出现的样式规则

10
单选题

选择器 #header .nav li a:hover 的优先级权重是多少？

A

122

B

121

C

112

D

111

11
单选题

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

A

定义CSS属性值

B

选择要应用样式的HTML元素

C

创建新的HTML元素

D

设置元素的显示顺序

12
单选题

以下哪个是标签选择器（元素选择器）？

A

.container

B

#header

C

div

D

[type="text"]

13
单选题

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

A

选择器之间用 > 分隔

B

选择器之间用空格分隔

C

选择器之间用 + 分隔

D

选择器之间用 ~ 分隔

14
单选题

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

A

div元素内的所有p元素

B

div元素的直接子元素p

C

div元素后面紧邻的p元素

D

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

15
单选题

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

A

#

B

.

C

:

D

$

16
单选题

[href^="https"] 属性选择器会选择哪些元素？

A

href属性值等于"https"的元素

B

href属性值以"https"开头的元素

C

href属性值包含"https"的元素

D

href属性值以"https"结尾的元素

多选题
17
多选题

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

A

:first-child

B

:last-child

C

:nth-child(n)

D

:hover

E

:not(selector)

18
多选题

以下关于CSS选择器的说法，正确的有？

A

标签选择器可以选择所有同名HTML元素

B

类选择器以.开头，可以在多个元素上使用

C

ID选择器以#开头，在页面中应唯一使用

D

属性选择器可以根据元素的属性匹配元素

E

伪类选择器用于选择元素的特定状态

填空题
19
填空题

属性选择器的匹配方式：

  • 选择有指定属性的元素：
  • 选择属性值完全匹配的元素：
  • 选择属性值包含指定词的元素：
20
填空题

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

  • 鼠标悬停状态使用
  • 链接被点击激活状态使用
  • 元素获得焦点状态使用
参考答案
1.正确 2.正确 3.正确 4.正确 5.B 6.C 7.B 8.C 9.C 10.A 11.B 12.C 13.B 14.B 15.A 16.B 17.A;B;C;E 18.A;B;C;D;E 19.[disabled];[type="checkbox"];[class~="active"] 20.:hover;:active;:focus
想在手机上刷这套专题的真题？
使用微信 卷王开发者小程序/App，首页顶部扫一扫识别二维码，即可解锁本专题全部配套练习与错题本。
了解产品 App
← 上一个专题 CSS盒模型专题 下一个专题 → CSS选择器进阶