css中的声明冲突

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属性值，共用其中一个属性值放相同的样式