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

考点介绍：

选择器是CSS的基础，也是校招中的高频考点，特别是复合选择器的执行优先级，同时也是实战中样式不生效的跟踪依据。

因为选择器的种类较多，很难直接记忆，可以考虑选择一个相对值，比如id类型，然后把简单选择器和复合选择器进行理解记忆。另外在项目练习中实战使用增加理解。

本期分享的内容分为试题、文章及视频三部分，答案详情解析和文章内容点击文章末尾链接即可查看！

一、考点题目

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

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

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

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

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

正确答案：B，id选择器和类选择器的区别:类选择器(class )好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。id 选择器好比人的身份证号码,全中国是唯一的,不得重复......

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

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

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

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

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

正确答案：B，不同级别，在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。作为style属性写在元素内的样式......

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

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

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

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

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

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

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

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

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

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

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

正确答案：C，后代选择器的优先级比较复杂，也是大厂前端的常考点，可以拿......

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

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

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

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

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

正确答案：B，这是一道考察实战能力和优先级基础的试题。一般遇到样式表现错误的情况......

二、考点文章

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

像儿子可以继承父亲的财产一样，在CSS中，祖先元素上的样式也会别后代元素所继承，利用继承可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会继承这些样式。继承时对开发的一种......

2.图文详解CSS中!important 的使用方法

在工作中经常会遇到因为选择器优先级导致的样式无法呈现，这个时候就要用到一个特殊的CSS属性，就是!important。!important使属性值有......

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

当我们写页面的时候，不知道你会不会产生这样的问题，为什么我给他添加的这条样式分明已经选择到我要给的元素了，但是他的样式并没有生效，那是为什么呢？定义的属性有冲突时......

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

有两个主要的部分构成：选择器以及一条或多条声明（选择器 {样式}）......

三、考点视频

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

当我们写页面的时候，不知道你会不会产生这样的问题，为什么我给他添加的这条样式分明已经选择到我要给的元素了，但是他的样式并没有生效，那是为什么呢……

相关题目及解析内容可点击下方链接查看：
PC端链接：https://xiaozhao.vip/dTopic/detail/1317
移动端链接：https://m.xiaozhao.vip/dTopic/detail/1317