首页 > 其他分享> > 浅谈CSS声明冲突与层叠机制

浅谈CSS声明冲突与层叠机制

2020-11-16 13:01:10 作者：互联网

CSS声明冲突

CSS声明冲突：当多个选择器选中同一个标签，如果属性名相同，属性值不同时则会产生冲突。

举个例子：
html：

<body>
    <p class="txt">CSS声明冲突</p>
</body>

css：

p{
    color: blue;
}

.txt{
    color: red;
}
body > p{
    color: yellow;
}

最终文字颜色为红色：

CSS层叠机制

CSS层叠机制：如果发生声明冲突浏览器会自动触发自己的层叠机制，在上面例子发生声明冲突的过程中浏览器就触发了层叠机制，层叠过程分成3步:

1.比较优先级

来源	高低
浏览器	低
作者	中
用户	高

当然，重要性（!important）：在属性值后跟上!important 就表示这是一条重要声明，不加则是普通声明。

2.比较特殊性
每个声明都有一个权重（特殊性），特殊性高的会胜出，低的淘汰，在比较特殊性时，每个冲突的声明会生成四个数字分组（a、b、c、d）来比较特殊性
分组值会根据选择器的类型而定，它们有四个规则:
(1)、使用ID选择器数字分组b值+1（0,1,0,0）
(2)、使用class、属性(如[color="red"])、伪类(如:hover) 数字分组c值+1（0,0,1,0）
(3)、使用元素和伪元素(如::before) 数字分组d值+1（0,0,0,1）
(4)、使用通配符（*）数字分组值是（0,0,0,0）(所以他对总特殊性没有影响)
到这里会发现分组值a没有说，a值是留给内联样式的，所以内联样式特殊性最高,数字分组值是（1,0,0,0)
到这里就能看出，最开始的例子特殊性比较如下：

p{  /* (0,0,0,1) */
    color: blue;
}
.txt{   /* (0,0,1,0) */
    color: red;
}
body > p{   /* (0,0,0,2) */
    color: yellow;
}

3.比较原次序
首先浏览器是从上往下解析代码的，所以在前面两步都未分出胜负的情况下，写在下面的代码则会胜出
举个例子：

p{
    color: yellow;
}
p{
    color: red;
}

这里优先级和特殊性都无法分出胜负，写在下面的会胜出，最终p标签文字颜色为红色，所以css重置文件我们也会放在最上面再引入自己的css文件。

标签：层叠,浅谈,特殊性,color,分组,声明,CSS
来源： https://www.cnblogs.com/hymenhan/p/13984566.html