CSS:层叠样式表的冲突处理

时间 2019-11-19

标签 css 层叠样式冲突处理栏目 CSS 繁體版

原文原文链接

前言

重叠样式表的冲突是经过重叠过程排序，最终肯定文档的显示方式的，也就是是说经过重叠排序来处理冲突问题。这过程起决定性做用的是选择器及其相关申明的特殊性，以及继承机制。

基本流程

一、找出全部相关规则，这些规则保护给定元素匹配的选择器；

二、按显示权重对应用到该元素的全部声明排序；

三、按照特殊性对应用到给定元素的全部声明排序；

四、按照顺序对应用到给定元素的全部声明排序。

显示权重

按照规则的重要性是普通和重要，按照来源是用户、制做者、浏览器。

从高到低是

一、用户重要

二、制做者重要

三、制做者普通

四、用户普通

五、浏览器

其中所谓重要和普通就是看是否在样式中加入!important

 
   
    
    h1 { 
    color:# 
    333!important;}

特殊性

一、ID选择器:0.1.0.0;

二、类选择器，属性选择或者伪类选择器:0.0.1.0;

三、元素和伪元素:0.0.0.1;

四、结合符和通配符对特殊性没贡献:0.0.0.0 存疑？到低是无特殊性仍是0特殊性

*{}

五、ID选择器和属性ID选择器的特殊性是不一样的。

六、内联样式的特殊性:1.0.0.0

七、继承无特殊性，比0特殊性还低。

八、非css样式特殊性会处理为0。

顺序

越日后，越有效。