考点介绍:
选择器是CSS的基础,也是校招中的高频考点,特别是复合选择器的执行优先级,同时也是实战中样式不生效的跟踪依据。因为选择器的种类较多,很难直接记忆。尽量在项目练习中理解和准确把握本考点
本期分享的CSS校招考点之选择器优先级,分为试题、文章以及视频三部分。
答案详情解析和文章内容可扫下方二维码或链接即可查看!
一、考点题目
1、对css的基础选择器中的类选择器和id选择器,以下说法不正确的是()
A.在一个页面里,同名的类选择器可以有多个,但是同名的id选择器只能有一个
B.可以把一些标签元素相同的部分样式放到id选择器中,节省css代码,统一修改也方便
C. id选择器可以做为页面定位的锚点
D.从样式的优先级来看,id选择器 > 类选择器
解答:
B
id选择器和类选择器的区别:类选择器(class )好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用......
2、对CSS选择器不同级别的执行优先级的描述,不正确的是()
A.!important执行级别最高,会覆盖子选择器的冲突样式,一般的公共类不推荐使用
B.id选择器的执行级别比行内样式的级别高
C.id选择器的执行级别比元素选择器的级别高
D.id选择器的执行级别比类选择器的级别高
解答:
B
总结排序:!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器 > 继承 > 浏览器默认属性......
3、对同一级别选择器,执行优先级的描述,不正确的是()
A.同一级别中后写的会覆盖先写的样式
B.行内样式的执行级别比页面内部样式表的级别高
C.行内样式的执行级别比CSS文件里样式定义的级别高
D.CSS文件里样式的执行级别比内部样式表高
解答:
D
同一级别的优先级比较不好理解,可以使用离DOM元素越近越高的思路记忆。建议实现一下样式更方便理解......
4、以下解决CSS样式冲突的方法,不正确的是()
A.细化选择符,可以使用后代组合器或子代组合器更为精确的描述来定位问题
B.改变CSS样式表中的顺序,特别是对于相同类型选择器指定的样式,前面的样式要大于后面
C.主动提升优先级,比如样式后加上关键字!important来判断问题
D.按照优先级顺序,从行内样式开始自内向外排查
解答:
B
这是一道考察实战能力和优先级基础的试题......
5、对CSS的复杂选择器优先级,描述不正确的是()
A.后代选择器比直接使用基础选择器的优先级高
B.id选择器个数多的优先级高
C.如果id选择器和类选择器的个数都相等,那后面的样式会覆盖前面的样式
D.id选择器个数相同,要看类选择器的个数
解答:
C
后代选择器的优先级比较复杂,也是大厂前端的常考点,可以拿#Content .name .title a span举例,总结优先级如下
(答案点击下方链接或者扫海报二维码查看哦)
二、考点文章
1、选择器的优先级和伪类的顺序
继承是对开发的一种简化,通过继承我们可以将元素共有的样式统一设置给祖先元素,这样就只需要设置一次,就给所有的元素设置了样式……
2、图文详解CSS中!important 的使用方法
在工作中经常会遇到因为选择器优先级导致的样式无法呈现,这个时候就要用到一个特殊的CSS属性,就是!important……
3、css选择器优先级顺序是什么?
当我们写页面的时候,不知道你会不会产生这样的问题,为什么我给他添加的这条样式分明已经选择到我要给的元素了,但是他的样式并没有生效,那是为什么呢……
(扫下方海报二维码查看完整版)
三、考点视频
1、把CSS的复杂选择器和简单选择器放到一起比较优先级,会不会晕
当我们写页面的时候,不知道你会不会产生这样的问题,为什么我给他添加的这条样式分明已经选择到我要给的元素了,但是他的样式并没有生效,那是为什么呢……
更多资讯可搜索校招VIP小程序查看哦!
移动端链接: <m.naoffer.com/dTopic/deta…>
PC端链接:<xiaozhao.vip/dTopic/deta…>