码迷,mamicode.com
首页 > 其他好文 > 详细

层叠机制

时间:2018-06-23 19:00:30      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:bubuko   元素选择器   alt   伪类   相同   进入   优先级   自动生成   冲突   

在css里,同一个样式的不同属性值应用于同一个标签则会产生声明冲突。

例如:技术分享图片

一旦出现声明冲突,浏览器会自动生成层叠机制。

层叠的过程

1.比较优先级

声明的优先级主要是看来源及重要性

来源:作者样式表、浏览器默认的样式表、用户样式表

按优先级从高到低:用户样式表>作者样式表>浏览器样式表

重要性:判断声明块里是否有!important,如果有,则表示是重要声明,将应用这个样式,反之为普通声明

当优先级为同级的时候则进入比较特殊性

2.比较特殊性

优先级:行内选择器>ID选择器>类选择器>元素选择器>通配符选择器

表示选择范围大的优先级低,选择范围小的优先级高

具体规则:每一个冲突的声明,会生成4个数字a,b,c,d

a:若声明为行内选择器,则为1,反之为0;

b:规则中id选择器的个数

c:规则中类选择器、伪类选择器的个数

d:规则中元素选择器、伪元素选择器的个数

通配符的特殊值为0

比较特殊性a越大,特殊性越高,若a相同,则比较b,比较特殊性b越大,特殊性越高,若b相同,则比较c,依次类推;

若特数值都相同,则比较源次性

3.比较源次性

最后出现的声明获胜,其他的全部淘汰

技术分享图片

如上图,由于优先级、特殊性都相同,则比较源次性,由于第二个color为最后声明,所以采用color:green这个样式;

层叠机制

标签:bubuko   元素选择器   alt   伪类   相同   进入   优先级   自动生成   冲突   

原文地址:https://www.cnblogs.com/xsg1/p/9217586.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!