CSS样式表优先级

全栈程序员站长

发布于 2022-09-14 10:59:21

7600

发布于 2022-09-14 10:59:21

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

前端入门学习笔记

`1. 以下结论仅基于浏览器的表现，不涉及深层原理，有待深入。`

`2. 本文的"优先级"仅为最后样式体现的描述，不与常规定义等同。`

行内样式 VS 内部样式、链接样式、导入样式

*结论：行内样式优先级最高

内部样式 VS 链接样式

*结论：就近原则——最靠近相关标签的样式优先级高

内部样式 VS 导入样式

《CSS权威指南》： “@import一定要写在除@charset外的其他任何CSS规则之前，如果置于其他位置将会被浏览器忽略，而且，在@import之后如果存在其它样式，则@import之后的分号是必须书写，不可省略的。”

`*结论：内部样式比导入样式优先级高（或者说覆盖）`

这里因为导入样式的特殊性，不能进行两种样式的交换的优先级比较。当然，如果进行交换，依然以内部样式为准。

4. 链接样式 VS 导入样式

*结论：就近原则——最靠近相关标签的样式优先级高

总结论：
1. 行内样式优先级最高；
2. 内部样式优先级大于导入样式，而与链接样式的优先级则与文档顺序有关，越靠近相关标签的样式优先级越高，即遵循就近原则。
3. 导入样式与链接样式的优先级也遵循就近原则。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/158973.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年7月1，如有侵权请联系 cloudcommunity@tencent.com 删除

java

https

css

网络安全

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

java

https

css

网络安全

登录后参与评论

0 条评论

热度