CSS的层叠对每一个样式规则指定一个权重。如果要应用若干个规则,那么权重最大的那个规则具有优先权。层叠规则依据下面几个步骤进行:
1. 查找有冲突的元素
浏览器会找到那些存在疑问的元素和属性的声明,如果相关联的选择器匹配存在疑问的元素,则声明适用。
2. 样式表的来源
按照规则的重要性(普通或者重要)和来源(用户、制作者或者浏览器)来从低到高排序:
1) 浏览器的缺省样式;
2) 用户定义的普通样式;
3) 制作者定义的普通样式;
4) 制作者定义的重要性(“!important”声明)样式;
5) 用户定义的重要性(“!important”声明)样式。
新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。
提示:重要性(“!important”声明),请参见本书[4.6.4 重要性]一节。
对于制作者定义的外部CSS文件引入的规则,它们的权重取决于它们引入的顺序。例如:
则font.css中的定义高于basic.css中的定义。
对于在样式表中使用@import规则引入的其他样式表,优先级规则同样适用。
嵌入式样式表的规则高于从文件引入的样式规则。行内样式表则又高于嵌入式样式表。
3. 选择器的特殊性
声明的第2排序基于选择器的特殊性:特殊的选择器超越一般的选择器。伪元素和伪类分别被视为一般元素和一般类。
4. 规则出现的先后次序
最后,根据规则出现的先后次序来排列。如果两条规则具有相同的权重,相同的来源和相同的特殊性,则后出现的规则超越先出现的规则。
引入的样式表中的规则被认为出现在样式表本身的所有规则之前。
除了个别声明的“!important”指定,上述策略给予制作者的样式表比用户样式表更大的权重。
4.6.2特殊性的计算
既然有层叠的规则,那么,如果有如下代码,其在浏览器内会如何显示呢?
.warning { color: red; }
p { color: green; }
层叠和继承的规则如何实现?
此代码在浏览器内显示如图4-31所示。
图4-31 选择器的特殊性
这是由于类选择器“warning”和类型选择器“p”的“特殊性”不同。
特殊性(specificity)描述了不同选择器的相对权重(weight)。一个选择器的特殊性是这样计算的:
·如果CSS属性是通过(X)HTML元素的style属性定义的,则记为a=1,否则记为0;
由于style属性是写在(X)HTML标签内的,因此不存在选择器,所以:a=1, b=0, c=0, 且 d=0;
·计算选择器中ID选择器的数量,计为b;
·计算选择器中类选择器、属性选择器和伪类的数量,计为c;
·计算选择器中类型选择器的数量,计为d;
·忽略伪元素。
将这4个数字(a, b, c, d)相连(数字进制要以大的为准),得到特殊性。例如:
{ …… } 特殊性 = 0, 0, 0, 0
li { …… } 特殊性 = 0, 0, 0, 1
ul li { …… } 特殊性 = 0, 0, 0, 2
ul ol+li { …… } 特殊性 = 0, 0, 0, 3
h1 + [rel=“up”] { …… } 特殊性 = 0, 0, 1, 1
ul ol li.warning { …… } 特殊性 = 0, 0, 1, 3
li.menu.level { …… } 特殊性 = 0, 0, 2, 1
#x34y { …… } 特殊性 = 0, 1, 0, 0
特殊性 = 1, 0, 0, 0
特殊性高的规则会取代特殊性低的规则,无论其书写的先后顺序如何,例如:
h1 {color red;} 0,0,0,1
body h1 {color green;} 0,0,0,2 (胜出)
或者:
h2.grape {color purple;} 0,0,1,1 (胜出)
h2 {color silver;} 0,0,0,1
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新
如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
文末
我一直觉得技术面试不是考试,考前背背题,发给你一张考卷,答完交卷等通知。
首先,技术面试是一个 认识自己 的过程,知道自己和外面世界的差距。
更重要的是,技术面试是一个双向了解的过程,要让对方发现你的闪光点,同时也要 试图去找到对方的闪光点,因为他以后可能就是你的同事或者领导,所以,面试官问你有什么问题的时候,不要说没有了,要去试图了解他的工作内容、了解这个团队的氛围。
前端面试题汇总
JavaScript
性能
linux
前端资料汇总
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-agm1pUnJ-1712715619589)]