码迷,mamicode.com
首页 > Web开发 > 详细

css中的声明冲突

时间:2017-12-16 23:14:15      阅读:285      评论:0      收藏:0      [点我收藏+]

标签:特殊性   ext   开始   weight   特殊   比较   :hover   sel   伪类   

css中会出现一种非常常见的现象:声明冲突

而规则之间属性相同,值却不同,这就是声明冲突

冲突并不是一个错误,那如何解决冲突?

 

层叠机制用于处理声明冲突(浏览器会自动触发层叠机制)

层叠的过程:

一.比较优先级(优先级高的胜出,低的淘汰)

 一个声明的优先级与它的来源和重要性有关

来源(优先级的从低到高):

1.浏览器默认样式表中的声明

2.用户样式表中的普通声明

3.作者样式表中的普通声明

4.作者样式表中的重要声明

5.用户样式表中的重要声明

重要性:若属性值后跟上! important 就表示这是一条重要声明,反之则是普通声明。

 

若优先级相同,则比较特殊性

二.比较特殊性

每个声明都有一个权重(特殊性、特指度 Specificity Weight)

特殊性高的会被保留

一个声明的特殊性,取决于规则适用范围的大小

规则适用范围越大,特殊性越低

规则适用范围越小,特殊性越高

特殊性从高到低:行内样式——id选择器——类选择器——元素选择器——通配符选择器

在比较特殊性时,每个冲突的声明会生成四个数字分组(a、b、c、d)来比较特殊性

a越大,特殊性越高,若a相同,比较b...

a:若声明是行内样式,则为1,飞否则为0(<h1  style = "box">)

b:规则中ID选择器的个数(#)

c:规则中类选择器、伪类选择器、属性选择器的个数(类选择器: .    伪类::link   :hover  属性:input[type="text"])

d:规则中元素选择器、伪元素选择器的个数(伪元素选择器(以两个冒号开始)  例:.testselect::selection 例:i::before)

 

若特殊性相同,比较源次序

三.源次序

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

该规则实际应用:

1.css reset代码前置

2.a元素的伪类书写顺序

复用:元素可以有多个class属性值,共用其中一个属性值放相同的样式

css中的声明冲突

标签:特殊性   ext   开始   weight   特殊   比较   :hover   sel   伪类   

原文地址:http://www.cnblogs.com/ohmyrose/p/8047859.html

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