【校招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.mzph.cn/news/46533.shtml

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

相关文章

人大进仓数据库ksql命令基础

测试环境信息: 系统为银河麒麟V10 数据库为Kingbase ES V8 数据库安装目录为/opt/Kingbase/ES/V8 ksql命令位于/opt/Kingbase/ES/V8/Server/bin下 使用--help获取帮助 续上图 1.查看数据库列表 ./ksql -U system -l 2.查看数据库版本 ./ksql -V 3.连接指定的数据库tes…

【GAMES202】Real-Time Shadows2—实时阴影2

一、PCSS回顾 上一篇我们说了如何用PCSS是实现软阴影,这个过程是没有任何问题的,但是有一个速度的问题,因为PCSS涉及到非常多次对纹理特定某一块区域遍历的操作(工业界一般都是用在该区域采样的方式,会因此产生噪声&am…

Zookeeper集群单节点启动成功但未同步其他节点数据

首先排查节点启动是否正常: 在zookeeper的bin目录下执行:sh zkServer.sh status 判断当前节点数据leader 还是follower 节点都启动正常,但某一个zookeeper集群节点(下面简称“异常节点”)不同步其他节点数据&#xf…

SQL-每日一题【1321. 餐馆营业额变化增长】

题目 表: Customer 你是餐馆的老板,现在你想分析一下可能的营业额变化增长(每天至少有一位顾客)。 计算以 7 天(某日期 该日期前的 6 天)为一个时间段的顾客消费平均值。average_amount 要 保留两位小数。 结果按 …

最新两年工作经验总结

最新两年工作经验总结 前言URP的使用1:如何开启URP1、老项目升级为URP2、创建新项目时选择URP创建 2:URP阴影的设置 PolyBrush的使用(地图编辑插件)制作山峰or低谷边缘柔化雨刷上色制造场景中的物体贴图地形创建容易踩坑的点ProBu…

java 工程管理系统源码+项目说明+功能描述+前后端分离 + 二次开发 em

Java版工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离 功能清单如下: 首页 工作台:待办工作、消息通知、预警信息,点击可进入相应的列表 项目进度图表:选择(总体或单个)项目显…

【C++习题集】-- 堆

(用于复习) 目录 树概念及结构 名词概念 二叉树概念及结构 特殊的二叉树 满二叉树 完全二叉树 运算性质 二叉树存储结构 顺序存储 链式存储 堆 - 顺序存储 堆的性质 堆的实现 堆的应用 堆排序 直接建堆法 树概念及结构 概念&#xff1a…

编写Dockerfile制作自己的镜像并推送到私有仓库

说明:我将用到的私有仓库是Harbor,安装教程参考我的这一篇文章: 安装搭建私有仓库Harbor_Word_Smith_的博客-CSDN博客 一、案例1 1、要求 编写Dockerfile制作Web应用系统nginx镜像,生成镜像nginx:v1.1,并推送其到私…

【高级IO】- 五种 IO 模型 | 多路转接 - select

目录 IO的基本概念 什么是高效的IO? 五种IO模型 阻塞IO 非阻塞IO 信号驱动IO IO多路转接 异步IO 同步通信VS异步通信(synchronous communication / asynchronous communication) 同步通信VS同步与互斥 阻塞VS非阻塞 其他高级IO …

JavaScript高级

1、JavaScript面向对象 1.1、面向对象介绍 ​ 在 Java 中我们学习过面向对象&#xff0c;核心思想是万物皆对象。在 JavaScript 中同样也有面向对象。思想类似。 1.2、类的定义和使用 结构说明 代码实现 <!DOCTYPE html> <html lang"en"> <head>…

十问华为云 Toolkit:开发插件如何提升云上开发效能

众所周知&#xff0c;桌面集成开发环境&#xff08;IDE&#xff09;已经融入到开发的各个环节&#xff0c;对开发者的重要性和广泛度是不言而喻的&#xff0c;而开发插件更是建立在IDE基础上的功能Buff。 Huawei Cloud ToolKit作为华为云围绕其产品能力向开发者桌面上的延伸&a…

快速实现SAP的移动化和流程优化

热门议题&#xff1a; 1、企业如何快速解决人员移动办公的需求&#xff0c;比如在苹果安卓手机&#xff0c;平板电脑&#xff0c;MAC登录SAP。2、企业如何解决用户经常抱怨的流程复杂&#xff0c;操作繁琐&#xff0c;难以使用等问题 公司介绍&#xff1a; Synactive,Inc. 是…

8. 实现业务功能--用户注册

目录 1. 顺序图 2. 参数要求 3. 接口规范 4. 创建扩展 Mapper.xml 5. 修改 DAO 6. 创建 Service 接口 7. 实现接口 8. 测试接口 9. 实现 Controller 9.1 密码加密处理 10. 实现前端界面 业务实现过程中主要的包和目录及主要功能&#xff1a; model 包&#xff1a;实体对象 d…

vue 弹出框 引入另一个vue页面

为什么要这么做,适用于在一个页面逻辑比较多的时候,可以搞多个页面,防止出错 index页面点击解约按钮,弹出框 进入jieyue.vue 核心代码 <el-buttonsize"mini"type"text"icon"el-icon-edit"v-if"scope.row.delFlag 0"click"j…

探索人工智能 | 模型训练 使用算法和数据对机器学习模型进行参数调整和优化

前言 模型训练是指使用算法和数据对机器学习模型进行参数调整和优化的过程。模型训练一般包含以下步骤&#xff1a;数据收集、数据预处理、模型选择、模型训练、模型评估、超参数调优、模型部署、持续优化。 文章目录 前言数据收集数据预处理模型选择模型训练模型评估超参数调…

websocker无法注入依赖

在公司中准备用websocker统计在线人数&#xff0c;在WebSocketServer使用StringRedisTemplate保存数据到redis中去&#xff0c;但是在保存的时候显示 StringRedisTemplate变量为null 详细问题 2023-08-20 10:37:14.109 ERROR 28240 --- [nio-7125-exec-1] o.a.t.websocket.po…

NAS个人云存储 - 手把手教你搭建Nextcloud个人云盘并实现公网远程访问

文章目录 摘要1. 环境搭建2. 测试局域网访问3. 内网穿透3.1 ubuntu本地安装cpolar3.2 创建隧道3.3 测试公网访问 4 配置固定http公网地址4.1 保留一个二级子域名4.1 配置固定二级子域名4.3 测试访问公网固定二级子域名 摘要 Nextcloud,它是ownCloud的一个分支,是一个文件共享服…

LeetCode ——二叉树篇(三)

刷题顺序及思路来源于代码随想录&#xff0c;网站地址&#xff1a;https://programmercarl.com 二叉树的定义及创建见&#xff1a; LeetCode ACM模式——二叉树篇&#xff08;一&#xff09;_要向着光的博客-CSDN博客 目录 116. 填充每个节点的下一个右侧节点指针 117. 填…

Maven介绍_下载_安装_使用_原理

文章目录 1 Maven介绍1.1 Maven的介绍1.2 Maven的作用 2 Maven下载与安装2.1 官网下载2.2 文件目录2.3 环境配置 3 Maven基础概念3.1 仓库分类3.2 依赖坐标3.3 坐标组成 4 Maven配置4.1 本地仓库配置4.2 远程仓库的设置4.3 镜像仓库配置4.4 IDEA配置Maven 5 Maven项目创建5.1 M…

LaWGPT零基础部署win10+anaconda

准备代码&#xff0c;创建环境 # 下载代码 git clone https://github.com/pengxiao-song/LaWGPT cd LaWGPT # 创建环境 conda create -n lawgpt python3.10 -y conda activate lawgpt pip install -r requirements.txt # 启动可视化脚本&#xff08;自动下载预训练模型约15GB…