【校招VIP】前端专题：CSS校招考点之选择器优先级

考点介绍：

选择器是CSS的基础，也是校招中的高频考点，特别是复合选择器的执行优先级，同时也是实战中样式不生效的跟踪依据。因为选择器的种类较多，很难直接记忆。尽量在项目练习中理解和准确把握本考点

答案详情解析和文章内容可点击链接即可查看！

一、考点题目

1. 对css的基础选择器中的类选择器和id选择器，以下说法不正确的是（）

A.在一个页面里，同名的类选择器可以有多个，但是同名的id选择器只能有一个

B.可以把一些标签元素相同的部分样式放到id选择器中，节省css代码，统一修改也方便

C. id选择器可以做为页面定位的锚点

D.从样式的优先级来看，id选择器 > 类选择器

正确答案： B，注意id选择器和类选择器的区别……

2.对CSS的复合选择器的以下描述，不正确的是（）

A.后代选择器可以是儿子，也可以是孙子等，只要是头元素的后代即可

B.子选择器用“>”表示，必须是亲儿子，孙子元素不关联到选择器

C.并集选择器用“,”分割，常用于多样式的集体声明

D.伪类选择器用“:”表示，比如说a:hover，不能用“::”定义

正确答案：D，D选项在CSS3中出现双冒号的伪类选择器……

3.对CSS选择器不同级别的执行优先级的描述，不正确的是（）

A.!important执行级别最高，会覆盖子选择器的冲突样式，一般的公共类不推荐使用

B.id选择器的执行级别比行内样式的级别高

C.id选择器的执行级别比元素选择器的级别高

D.id选择器的执行级别比类选择器的级别高

正确答案：B，B选项把行内样式的优先级描述错误……

4.对同一级别选择器，执行优先级的描述，不正确的是（）

A.同一级别中后写的会覆盖先写的样式

B.行内样式的执行级别比页面内部样式表的级别高

C.行内样式的执行级别比CSS文件里样式定义的级别高

D.CSS文件里样式的执行级别比内部样式表高

正确答案：D，同一级别的优先级比较不好理解，可以使用离DOM元素越近越高的思路记忆……

5.对CSS的复杂选择器优先级，描述不正确的是（）

A.后代选择器比直接使用基础选择器的优先级高

B.id选择器个数多的优先级高

C.如果id选择器和类选择器的个数都相等，那后面的样式会覆盖前面的样式

D.id选择器个数相同，要看类选择器的个数

正确答案：C，后代选择器的优先级比较复杂，也是大厂前端的常考点，可以拿#Content .name .title a span举例……

6.以下解决CSS样式冲突的方法，不正确的是（）

A.细化选择符,可以使用后代组合器或子代组合器更为精确的描述来定位问题

B.改变CSS样式表中的顺序，特别是对于相同类型选择器指定的样式，前面的样式要大于后面

C.主动提升优先级,比如样式后加上关键字!important来判断问题

D.按照优先级顺序，从行内样式开始自内向外排查

正确答案：B，一般遇到样式表现错误的情况，都需要从右到左，从近到远的按属性排查……

二、考点文章

1.选择器的优先级和伪类的顺序

当选择不同的选择器，选中同一个元素时并且设置相同的样式时，这样样式之间就会产生冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）来决定，优先级高的优先显示。

2.css选择器优先级顺序是什么？

不同级别在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

3.css规则、选择器（基础、复合）/选择器优先级

类选择器(class )好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。

三、考点视频

把CSS的复杂选择器和简单选择器放到一起比较优先级，会不会晕

总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性

pc端专题链接：

https://xiaozhao.vip/dTopic/detail/159

移动端专题链接：

https://m.xiaozhao.vip/dTopic/detail/159