当前位置: 首页 > news >正文

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

考点介绍:
选择器是CSS的基础,也是校招中的高频考点,特别是复合选择器的执行优先级,同时也是实战中样式不生效的跟踪依据。
因为选择器的种类较多,很难直接记忆,可以考虑选择一个相对值,比如id类型,然后把简单选择器和复合选择器进行理解记忆。另外在项目练习中实战使用增加理解。

CSS校招考点之选择器优先级相关题目及解析内容可点击文章末尾链接查看

一、考点题目

1.对css的基础选择器中的类选择器和id选择器,以下说法不正确的是()
A.在一个页面里,同名的类选择器可以有多个,但是同名的id选择器只能有一个
B.可以把一些标签元素相同的部分样式放到id选择器中,节省css代码,统一修改也方便
C. id选择器可以做为页面定位的锚点
D.从样式的优先级来看,id选择器 > 类选择器

解答:正确答案是 B     id选择器和类选择器的区别:1 类选择器(class )好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用。2 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规则、选择器(基础、复合)/选择器优先级
有两个主要的部分构成:选择器以及一条或多条声明(选择器 {样式})......

三、考点视频

1.把CSS的复杂选择器和简单选择器放到一起比较优先级,会不会晕
当我们写页面的时候,不知道你会不会产生这样的问题,为什么我给他添加的这条样式分明已经选择到我要给的元素了,但是他的样式并没有生效,那是为什么呢……

更多资讯可搜索校招VIP小程序查看哦!

CSS校招考点之选择器优先级相关题目及解析内容可点击下方链接查看:

CSS校招考点之选择器优先级-移动端链接
CSS校招考点之选择器优先级-PC端链接

http://www.lryc.cn/news/132728.html

相关文章:

  • Netty+springboot开发即时通讯系统笔记(四)终
  • java -jar 启动服务后,关闭命令窗口后服务停止
  • Android PowerManager的使用
  • 安防监控/视频集中存储/云存储平台EasyCVR v3.3增加首页告警类型
  • 7-6 统计字符出现次数
  • 美国大模型风向速报(一)为何重视提示工程?LangChain+向量数据库+开源大模型真香...
  • excel统计函数篇2之count系列
  • vue3组件多个根节点报错
  • 基于Rust的QuickLZ压缩算法的详细实现与分析
  • next.js 创建 react ant design ts 项目
  • 无涯教程-Perl - use函数
  • (7)(7.6) 恢复任务回放
  • spark yarn 开启动态资源分配
  • Android学习之路(8) Activity
  • Linux的热拔插UDEV机制
  • Azure应用程序网关
  • 免费开源服务器资源监控系统grafana+prometheus+node_exporter
  • 【文化课学习笔记】【化学】金属及其化合物
  • Java面试题--设计模式
  • 【VS Code插件开发】Webview面板(三)
  • WebDriver API及对象识别技术
  • 计算机视觉之三维重建(一)(摄像机几何)
  • 机器学习算法-随机森林
  • Springboot 实践(10)spring cloud 与consul配置运用之服务的注册与发现
  • 解决方案:如何在 Amazon EMR Serverless 上执行纯 SQL 文件?
  • pytorch lightning和pytorch版本对应
  • Postman返回了一个html页面
  • centos服务器搭建宝塔面板
  • 【微信小程序】记一次自定义微信小程序组件的思路
  • TiDB数据库从入门到精通系列之四:SQL 基本操作