css的层叠机制详解
程序员文章站
2022-04-05 09:01:52
css的层叠机制
浏览器层叠各个来源样式的顺序:
1浏览器默认样式;2用户样式表;3链接样式表;4嵌入样式;5行内样式;
前面出现的样式会被后面相同的样式覆盖
层叠规则一:...
css的层叠机制
浏览器层叠各个来源样式的顺序:
1浏览器默认样式;2用户样式表;3链接样式表;4嵌入样式;5行内样式;
前面出现的样式会被后面相同的样式覆盖
层叠规则一:
找到应用给每个元素和属性的所有声明。浏览器在加载每个页面时,都会据此查到每一条CSS规则,标识出所有受到影响的HTML元素。
层叠规则二:
按照顺序和权重排序。浏览器依次检查5个来源,并设定匹配的属性。如果匹配的属性在下一个来源也有定义,则更新该属性的值,如此循环,直到检查完页面中所有标签受影响属性的全部5个来源为止。最终某个属性被设定成什么值,就用什么值来显示。
层叠规则三:
按特指度排序 I-C-E
1.选择符中有一个ID,就在I的位置上加1;
2.选择符中有一个类,就在C的位置上加1;
3.选择符中有一个元素(标签)名,就在E的位置上加1;
4.得到一个三位数。
p 0-0-1特指度=1
p .a 0-1-1特指度=11
p #main 1-0-1特指度=101
相同的属性 以特指度越大为准。
先比较第一位,再第二位,最后第三位。
0-1-12与0-2-0相比。仍然是0-2-0的特指度更高。
层叠规则四:
顺序决定权重。
如果两条规则都影响某元素的同一个属性,而且他们的特指度也相同,则位置考下的规则胜出。
上一篇: 手机AI化势不可挡!ivvi或成为国产厂商里冲出的黑马
下一篇: 草莓说哈哈哈带上番茄西瓜