前端八股文 说一说样式优先级的规则是什么?

标准的回答

CSS样式的优先级应该分成四大类
第一类 !important:
😄无论引入方式是什么,选择器是什么,它的优先级都是最高的。
第二类 引入方式:
😄行内样式的优先级要高于嵌入和外链,嵌入和外链如果使用的选择器相同就看他们在页面中插入的顺序,在后面插入的会覆盖前面的。
第三类 选择器
😄选择器优先级:id选择器>(类选择器 | 伪类选择器 | 属性选择器 )> (后代选择器 | 伪元素选择器 )> (子选择器 > | 相邻选择器) > 通配符选择器 。
第四类 继承样式
😄是所有样式中优先级比较低的。
第五类 浏览器默认样式
😄优先级最低

加分回答:

1.使用!important要谨慎:
① 定要优先考虑使用样式规则的优先级来解决问题而不是 !important
② 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
③ 永远不要在你的插件中使用 !important
④ 永远不要在全站范围的 CSS 代码中使用 !important

2.优先级的比较 指的是相同的样式属性,不同样式属性优先级比较失效
比如:在设置max-width时注意,已经给元素的max-width设置了!important但是还不生效,很有可能就是被width覆盖了
举例:div最终的宽度还是200px

div { max-width: 400px !important; height: 200px;background-color: tomato; width: 200px; 
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/866527.shtml

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

相关文章

C++11|左、右值引用和移动语义

目录 一、左值引用 && 右值引用 1.1什么是左值?什么是左值引用? 1.2什么是右值?什么是右值引用? 1.3左值引用与右值引用比较 二、左、右值引用使用场景(为什么要有右值引用?) 2.1左值引用使用场景: 2.2右…

秋招突击——设计模式补充——简单工厂模式和策略模式

文章目录 引言正文简单工厂模式策略模式策略模式和工厂模式的结合策略模式解析 总结 引言 一个一个来吧,面试腾讯的时候,问了我单例模式相关的东西,自己这方面的东西,还没有看过。这里需要需要补充一下。但是设计模式有很多&…

数字IC设计-VCS和Verdi的使用

#学习记录# 前言:本文以一个简单的计数器来说明vcs和verdi的使用 1 代码文件 1.1 计数器代码 //Engineer:Mr-pn-junction module counter(input clk,input rst,output reg [5:0] count); always(posedge clk or negedge rst)beginif(!rst)coun…

【算法】(C语言):二分查找

二分查找: 获取查找区域的中间位置。若中间位置的数据就是要找的值,则返回true。若要找的值 小于 中间位置的数据,则往左边查找。若要找的值 大于 中间位置的数据,则往右边查找。重复1和2,若没有要找的值,…

LM-Cocktail:一种创新的模型合并方法打破预训练语言模型微调后的性能局限,实现语言模型在一般任务与特定领域的均衡高性能

LM-Cocktail:一种创新的模型合并方法打破预训练语言模型微调后的性能局限,实现语言模型在一般任务与特定领域的均衡高性能 使语言模型的微调类似于调制一杯精致的鸡尾酒。模型合并可用于提高单个模型的性能。我们发现此方法对于大型语言模型和密集嵌入模型也很有用,并设计了…

业界数据架构的演变

目录 一、概述 二、业务处理-单体架构 三、业务处理-微服务架构 四、数据分析-大数据Lambda架构 五、数据分析-Kappa架构 六、数据分析-LambdaKappa混合架构 七、湖仓一体架构 一、概述 近年来随着越来越多的大数据技术被开源,例如:HDFS、Spark等…

Linux 进程与服务管理:使用systemctl、service命令管理系统服务

Linux 进程与服务管理:使用systemctl、service命令管理系统服务 在Linux系统中,进程和服务的管理是系统运维的重要组成部分。随着Linux的发展,systemd成为了大多数现代Linux发行版的初始化系统,它提供了systemctl命令来管理系统服…

【Linux进程通信】共享内存

目录 共享内存函数 头文件 shmget ftok函数​ shmat shmdt shmctl 共享内存区是最快的IPC 形式。一旦这样的内存映射到共享它的进程的地址空间,这些进程间数据传递不再涉及到操作系统内核,换句话说是进程不再通过执行进入内核的系统调用来传递彼此的数据…

《向量数据库指南》——Milvus Cloud查询增强如何提升 RAG Pipeline 效果?

查询增强 1.假设性问题 这一方法首先使用LLM为每一条文档块生成一些假设问题,这些文档块可以回答与之对应的假设问题。在RAG阶段,进行一个query-to-query的搜索,先搜索到相关的假设问题,然后找到对应的文档块,再通过它们生成最后的回答。 这里的query-to-query指的是embed…

【数据库】仓库管理数据库(练习样例)

某连锁超市需要设计实现一个仓库管理系统,要求每个仓库可以有多名仓库管理员,每个仓库管理员只负责管理一个仓库,同时每个仓库都配备了一名仓库主管;不同的仓库存放的是不同类型的货品,每种货品只存放在固定的仓库中&a…

R语言数据分析案例40-华安中证基金多元线性回归和分析预测

一、引言 基金是一种非常受欢迎的投资工具,由于其具有风险分散、专业管理等特点,越来越多的投资者选择将资金投入基金市场。然而,基金的表现却受到很多因素的影响,如股票市场的整体表现、基金管理人员的能力、基金规模、基金管理…

SpringAOP如何控制只在生产环境执行AOP类

SpringAOP场景原理、如何在特定环境(如dev不执行、prod执行)不执行AOP 1、在定义AOP切面类的时候,用注解Profile, 再配合配置application.properties 的 spring.profiles.activeprod Aspect Component Profile("prod") public class LoggingA…

二二复制模式,发展下属并形成一个销售网络体系来实现收入增长!

二二复制模式,又称为双轨制,是一种直销理念的营销模式,其核心在于通过发展下属并形成一个销售网络体系来实现收入增长。以下是对二二复制模式的详细讲解,包括其优势和玩法介绍,以及适合的行业。 一、二二复制模式的定…

【React性能优化】父组件渲染如何避免子组件不必要的渲染

类组件: 需要注意的点是,尽量避免事件处理函数直接返回,如以下写法: class LoggingButton extends React.Component {handleClick() {console.log(this is:, this);}render() {// 此语法确保 handleClick 内的 this 已被绑定。r…

Flutter集成高德导航SDK(Android篇)(JAVA语法)

先上flutter doctor: flutter sdk版本为:3.19.4 引入依赖: 在app的build.gradle下,添加如下依赖: implementation com.amap.api:navi-3dmap:10.0.700_3dmap10.0.700navi-3dmap里面包含了定位功能,地图功能…

UML图的分类

uml图是用来展示大型软件工程之间的内部关系,如果只用代码表示,密密麻麻的谁看都头疼。 UML图分为结构图和行为图 .类图:一组对象,接口,协作和它们之间的关系 对象图:一组对象以及它们之间的关系 用例图…

Mysql在linux系统中定时备份

1. 创建备份脚本 #!/bin/bash# 设置数据库名、用户名和密码 DB_NAME"your_database_name" DB_USER"your_username" DB_PASSWORD"your_password"# 设置备份目录 BACKUP_DIR"/path/to/your/backup/directory"# 创建备份目录如果不存在 …

Kafka搭建(集群版)

Kafka单机版 部署前提 VMware环境 : 两台centos系统 Jdk包:jdk-8u202-linux-x64.tar.gz Kafka包:kafka_2.12-3.5.0.tgz Zookeeper包:apache-zookeeper-3.7.2-bin.tar.gz 百度网盘自取: 链接: https://pan.baidu.com/s/11EWuhBoSmH3musd_3Rgodw?pwde32t 提取码: e32t Kafka搭建…

运行程序报错died with <Signals.SIGKILL: 9>问题定位及解决方法

运行程序报错died with 报错 当我在运行程序时,报错: Traceback (most recent call last):File "/home/anaconda3/envs/scene_graph_benchmark/lib/python3.8/runpy.py", line 194, in _run_module_as_mainreturn _run_code(code, main_glo…

免密登录ssh

前言: 1.基于口令的认证(password认证): 客户端向服务器发出password认证请求,将用户名和密码加密后发送给服务器,服务器将该信息解密后得到用户名和密码的明文,与设备上保存的用户名和密码进行…