CSS层叠

前面的话
层叠样式表CSS最基本的一个特性就是层叠。冲突的声明通过层叠进行排序,由此确定最终的文档表示。而这个过程的核心就是选择器及其相关声明的特殊性、重要性、来源及继承机制。本文将详细介绍CSS层叠
特殊性
选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分(如:0,0,0,0)。下面来介绍不同的选择器的特殊性值
1、内联样式 -> 1,0,0,0
2、ID属性值 -> 0,1,0,0
3、类属性值、属性选择或伪类 -> 0,0,1,0
4、元素或伪元素 -> 0,0,0,1
5、结合符和通配选择器 -> 0,0,0,0
特殊性的值是从左向右排序的,特殊性值1,0,0,0大于以0开头的所有值,而无论后面是什么数。在一组规则中,特殊性最高的规则胜出
h1{} -> 0,0,0,1 p em{} -> 0,0,0,2 .grape{} -> 0,0,1,0 *.bright{} -> 0,0,1,0 p.bright em.dark{} -> 0,0,2,2 #id121{} -> 0,1,0,0 div#side *[href]{} -> 0,1,1,1
重要性
有时某个声明可能非常重要,超过了所有其他声明,CSS2.1称之为重要声明。重要声明在声明的结束分号之前插入!important来标志,如果!important放在声明的任何其他位置,整个声明都将无效
如果一个声明是重要声明,则超过所有的非重要声明
继承
继承是从一个元素向其后代元素传递属性值所采用的机制。基于继承机制,样式不仅可以应用到指定的元素,还会应用到它的后代元素
在两个比较特殊的情况需要注意:一个是在HTML中,应用到body元素的背景样式可以传递到html元素;另一个是<a>标签不会继承父元素的文本样式
[注意]继承的属性没有特殊性
来源
CSS按来源的不同分为3类:author(作者)、user(用户)、user agent(代理)
1、author(作者): 来自文档的样式文件。我们平常所写的样式基本上都是这一类的
2、user(用户): 用户指定的自定义的样式文件。一些UA允许用户导入自定义的样式文件
3、user agent(代理): 一些UA(如:浏览器)要为某些元素预设一个默认的样式,以方便阅读
关于用户CSS因为不常见,可能一些朋友不太理解。IE可以通过Internet 选项
-> 外观
-> 辅助功能
-> 用户样式表
来指定样式文件。Chrome可以使用Stylish
扩展来实现
层叠
CSS层叠样式表的层叠特性就是让样式层叠在一起,通过特殊性、重要性、来源及继承机制来排列层叠样式的顺序及选出胜出者
1、首先,按照来源及重要性排序。在不考虑重要性的前提下,优先级顺序为:author(作者) > user(用户) > user agent(代理)。但是,如果考虑重要性,则user(用户)的优先级大于author(作者)的优先级,这样做是试图平衡author(作者)和user(用户)。所以,最终的优先级排序为:user(用户)!important > author(作者)!important > author > user > user agent
2、接着,对于非重要声明来说,按照特殊性排序。特殊性越高的规则,权重越大
3、最后,如果特殊性相同,则按照出现顺序排序。声明在样式表或文档中越靠后出现,权重越大。如果样式表中有通过@import导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表的所有声明在后
好的代码像粥一样,都是用时间熬出来的

【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· .NET周刊【3月第1期 2025-03-02】
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器