[原创]通过IE8的测试来看CSS选择符的样式渲染优先级
发布日期:2021-10-24 15:11:36 浏览次数:28 分类:技术文章

本文共 946 字,大约阅读时间需要 3 分钟。

以下内容为个人测试结果,仅供参考

1、选择符样式的优先级为:

内联样式 > 多级选择符样式 > ID选择符样式 > CLASS选择符样式 > TAG选择符样式

比如标签内定义的 style="color:red" 是内联样式,是优先级最高的,而类似 div {color:blue} 这样的单纯tagname的选择符是优先级最低的。

2、多层的选择符会根据单层选择符的优先级逐级加载并保留优先权最高的样式,级别越多权限越高,同级别内按照单层选择符优先级决定保留样式

多级选择符定义优先级高于单层选择符定义,比如 DIV #mydiv {...} 这个定义会覆盖 #mydiv {...} 定义内的同名属性值。

3、选择符样式的载入顺序是按文本流自上而下加载,不同选择符的样式优先级跟定义的位置先后没有关系,比如应用于同一标签的ID和CLASS选择符,无论先定义谁,都是ID选择符优先级高。

同名选择符的样式总是后加载的相同样式属性优先级高,会覆盖当前已有的属性定义;可以认为同名选择符的样式会被浏览器按照加载顺序合并不同样式属性定义、覆盖相同样式属性定义,最终形成一个唯一的整体CLASS定义。

4、多个CLASS选择符应用于同一个标签时,各CLASS的优先级跟应用次序无关,只与它们定义时的位置次序有关。个人猜想,IE很可能是把所有应用到的CLASS全部枚举出来,然后按照这些CLASS的定义次序进行合并,跟这些CLASS被引用时的次序无关。看来IE对多个不同名CLASS样式的合并仍然遵循其对同名CLASS定义合并的原则,文本流顺序内后定义的优先级高。

比如 <div class="c2 c0 c1"> 不论c0,c1,c2被引用时是什么次序,合并顺序仍然按照他们在样式表里的定义顺序来合并。不知道其它浏览器是不是也遵循这个原则?以前总是想当然的认为多个CLASS应用于同一标签时,是按照引用次序来渲染样式的,经过测试才知道,还是按照被引用CLASS的定义次序来渲染的。

 

总结:样式渲染的优先级取决于选择符的个性化程度,私有程度越高优先级越高。

转载于:https://www.cnblogs.com/joy2code/archive/2012/03/30/2424889.html

转载地址:https://blog.csdn.net/weixin_30800807/article/details/94935224 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:哈雷haley教你如何用你的手机测试你的移动端项目
下一篇:AtCoder Grand Contest 030 (AGC030) F - Permutation and Minimum 动态规划

发表评论

最新留言

做的很好,不错不错
[***.243.131.199]2024年04月20日 18时32分43秒