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

news2025/1/19 19:35:50

考点介绍:
选择器是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.coloradmin.cn/o/884293.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

day4 IO模型

IO多路复用 1.select函数 服务器: 客户端 poll函数 客户端:

《Java-SE-第三十八章》之注解

前言 在你立足处深挖下去,就会有泉水涌出!别管蒙昧者们叫嚷:“下边永远是地狱!” 博客主页:KC老衲爱尼姑的博客主页 博主的github,平常所写代码皆在于此 共勉:talk is cheap, show me the code 作者是爪哇岛的新手,水平很有限&…

每日记--前端解决方案--el-select下拉样式-el-option内容过长-鼠标悬停到文字不修改光标样式-设置透明

文章目录 el-select下拉样式el-select中el-option内容过长解决办法鼠标悬停到文字不修改光标样式设置透明 el-select下拉样式 element-ui自带样式设置popper-class el-select中el-option内容过长解决办法 问题:像这样选项太长了,不好看 解决&#xf…

关于Linux文件系统只读问题的修改笔记

1.问题 2. 原因 系统异常关机或者代码修改错误导致硬盘挂载出现问题开启只读模式,但是重启有时候可以解决。 3.解决方法 1. mount查看那个挂载的硬盘出现问题(ro标识只读) mount | grep ro2.找到硬盘,重新挂载即可 sudo mount -o remount,rw /sys/f…

半导体市场震荡,硅晶圆价格下修成焦点 | 百能云芯

半导体市场状况不容乐观,原本被半导体晶圆制造厂视为稳定业绩的长期合同开始面临松动。行业内传出,国内重要的晶圆代工大厂已向日本硅晶圆供应商提出要求降低明年合同价格的请求,以共同应对困境,双方目前正处于激烈的博弈中。鉴于…

测试相关Liunx基础知识

Linux的历史和安装 基本常识 Liunx目录结果 常见

1€滤波器(1 Euro Filter)使用介绍

怎么调整欧拉角x、y、z的抖动问题?

python+django+mysql项目实践四(信息修改+用户登陆)

python项目实践 环境说明: Pycharm 开发环境 Django 前端 MySQL 数据库 Navicat 数据库管理 用户信息修改 修改用户信息需要显示原内容,进行修改 通过url传递编号 urls views 修改内容需要用数据库的更新,用update进行更新,用filter进行选择 输入参数多nid,传递要修…

数据结构--有向⽆环图 描述表达式

数据结构–有向⽆环图 描述表达式 有向⽆环图 \color{red}有向⽆环图 有向⽆环图:若⼀个有向图中 不存在环 \color{red}不存在环 不存在环,则称为有向⽆环图,简称 D A G 图 \color{red}DAG图 DAG图(Directed Acyclic Graph&#x…

2021年09月 C/C++(二级)真题解析#中国电子学会#全国青少年软件编程等级考试

第1题:字符统计 给定一个由a-z这26个字符组成的字符串,统计其中哪个字符出现的次数最多。 输入 输入包含一行,一个字符串,长度不超过1000。 输出 输出一行,包括出现次数最多的字符和该字符出现的次数,中间以…

autodock后的pdbqt文件怎么通过网站分析?

首先需要在pymol中打开这个docking后的分子 然后再打开受体, 注意:顺序不要反,顺序反了会导致网址分析错误 最后导出为pdb就可以了放在网站上用了 网址:https://plip-tool.biotec.tu-dresden.de/plip-web/plip/index

RK3568KK操作手册

一.烧录MCU 板子不用上电,接上烧录器 打开 HOPE3000 For e-Link 烧录软件。选择文件,选择要烧录的固件:HT66F2030.MTP 选择3V 点击下载, 点击所有 烧录成功如图所示: 二.接上电源&am…

什么是自动化测试?如何做自动化测试?

前面介绍了功能测试和接口测试,在介绍接口测试时提到了实现API自动化。那具体什么是自动化,为什么要做自动化,这里我们集中总结。 一. 什么是自动化? 顾名思义,自动化测试是相对人工测试而言的,它是指把人…

易云维®医院后勤一站式服务平台实现对医院人、物、设备进行信息化管理

传统后勤移动系统的缺陷 使用的门槛和成本高。在国内只有一些大医院开展及应用,由于传统移动运维系统需要定制软件、结合专用平板使用,导致整体项目价格昂贵,故一般采购医院配置的平板少,从而影响记录实时互动追踪的效果&#xf…

如何克服预测性维护中IT和OT的融合挑战?

预测性维护(Predictive Maintenance,简称PdM)在现代制造业中扮演着关键角色,通过实时数据分析和资产监控,帮助企业预测设备故障,优化维护计划,并提高生产效率。然而,PdM的成功实施面…

无法解析的外部符号cusolverDnCreate

问题: 无法解析的外部符号cusolverDnCreate 解决方案 那么就在启动项目-》属性-》连接器-》输入-》附加依赖项:加: cublas.lib cublas_device.lib cuda.lib cudadevrt.lib cudart.lib cudart_static.lib cufft.lib cufftw.lib curand.lib …

Flink 流式读写文件、文件夹

文章目录 一、flink 流式读取文件夹、文件二、flink 写入文件系统——StreamFileSink三、查看完整代码 一、flink 流式读取文件夹、文件 Apache Flink针对文件系统实现了一个可重置的source连接器,将文件看作流来读取数据。如下面的例子所示: StreamExe…

编写一个通用函数,从键盘输入n,显示正n边形。通过调用函数,在屏幕上同时显示下面的四个图形

题目:编写一个通用函数,从键盘输入n,显示正n边形。通过调用函数,在屏幕上同时显示下面的四个图形。 结果: 调用举例: drawShape(3)drawShape(4)drawShape(5)drawShape(6) 代码: import turt…

数据库MySQL 创建查询恢复数据库

创建数据库 查询数据库 备份恢复数据库

【Docker】 使用Docker-Compose 搭建基于 WordPress 的博客网站

引 本文将使用流行的博客搭建工具 WordPress 搭建一个私人博客站点。部署过程中使用到了 Docker 、MySQL 。站点搭建完成后经行了发布文章的体验。 WordPress WordPress 是一个广泛使用的开源内容管理系统(CMS),用于构建和管理网站、博客和…