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

标准的回答

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

加分回答:

1.使用!important要谨慎:

① 定要优先考虑使用样式规则的优先级来解决问题而不是 !important

② 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important

③ 永远不要在你的插件中使用 !important

④ 永远不要在全站范围的 CSS 代码中使用 !important

2.优先级的比较 指的是相同的样式属性,不同样式属性优先级比较失效

比如:在设置max-width时注意,已经给元素的max-width设置了!important但是还不生效,很有可能就是被width覆盖了

举例:div最终的宽度还是200px

javascript 复制代码
div { 
		max-width: 400px !important; 
		height: 200px;
		background-color: tomato; 
		width: 200px; 
}
相关推荐
前端小巷子27 分钟前
Webpack 5模块联邦
前端·javascript·面试
玲小珑30 分钟前
Next.js 教程系列(十九)图像优化:next/image 与高级技巧
前端·next.js
晓得迷路了31 分钟前
栗子前端技术周刊第 91 期 - 新版 React Compiler 文档、2025 HTML 状态调查、Bun v1.2.19...
前端·javascript·react.js
江城开朗的豌豆37 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆42 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan1 小时前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程1 小时前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea9 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员