摘要：问题在写时，有时候会遇到浏览器中显示的样式和自己的预期不符合的情况，这是因为没有理解的层叠机制。清楚地理解了他这三大法宝，我们就能精准的预测出每个元素在浏览器中的样式了。
问题：
在写CSS时，有时候会遇到浏览器中显示的样式和自己的预期不符合的情况，这是因为没有理解CSS的层叠机制。
例如文档中有一个p元素,用内联样式为他设置了颜色：
2016年10月20日
在CSS中又用不同的方式给他指定了颜色：
p {
color: #000;
}
.date {
color: #FFF;
}
这三个规则都要控制p元素的颜色，而p元素肯定只能有一种颜色，那么他会选择哪一种呢？
层叠：层叠就是用来处理这种冲突的一种机制。
他有三大法宝来帮助他完成这个任务：重要度、特殊性、先后顺序。
首先决定使用规则的是重要度，层叠采用的重要度次序（序号越小越重要）：
1.标有！important的用户样式
2.标有！important的作者样式
3.作者样式
4.用户样式
5.浏览器/用户代理应用的样式
重要度更高的规则会覆盖重要度较低的规则。
二、特殊性那如果重要度相同呢？像上面的例子那样，都是普通的作者样式，他会怎么处理呢？
这时候就要用到另外一个概念，特殊性。更特殊的规则会成为优胜方。
与样式来源不同，CSS选择器多种多样，并且可以叠加使用，添加样式的方法也很多（内联，外部引用，继承）。所以，为了更好的衡量一个规则的特殊性，层叠机制为每个选择器和方法都分配了一个数值：
行内样式：1000
ID选择器：100
类、伪类、属性选择器：10
类型选择器、伪元素选择器：1
继承：0
每个规则的特殊性就是他包含的选择器和方式对应的值之和。所以在上面的例子中，p元素的颜色会是 #999.
不管规则多么复杂，这个法宝都能胜任。
例如：
2016年10月20日
13:20:00
如果CSS中是这样写的，表示时间的p元素的颜色会是#000，因为‘#calendar p’的特殊性为100+1=101，而‘#time’的特殊性为100，虽然‘#time’离目标元素更近，但这并不是评判标准。
#calendar p{
color: #000;
}
#time {
color: #FFF;
}
第二个规则如果换成
.date #time {
color: #FFF;
}
"13:20:00"的颜色会是#FFF，因为‘.date #time’的特殊性为10+100=110.
三、先后顺序那么如果换成这样呢？
#calendar p{
color: #000;
}
p#time {
color: #FFF;
}
这两个规则的特殊性相同了。这个时候就要用到第三个法宝，先后顺序。
因为浏览器解析CSS文档时是自上而下的，所以当前两个法宝都无法分清胜负时，靠后面的规则会取胜，所以它的颜色会是#FFF
有了这三个法宝，层叠机制就可以处理一切冲突了。清楚地理解了他这三大法宝，我们就能精准的预测出每个元素在浏览器中的样式了。
附上一个用于测试的小链接：
https://jsfiddle.net/mamengyi...
参考：《精通CSS》
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111658.html
摘要：为了解决冲突，确定哪条规则胜出并最终被应用，提供了三种机制继承层叠和特指。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。层叠规则四顺序决定权重。规则三设定的样式胜过继承的样式，此时不用考虑特指度即显式设定优先。 为了解决冲突，确定哪条规则胜出并最终被应用，CSS提供了三种机制：继承、层叠和特指。 1.继承 CSS 中的祖先元素会向后代传递一样东西：CSS属性...
摘要：知道存在是很有用的，这样当你在别人的代码中遇到它时，你就知道它是什么了。如上面所示的示例所示，元素选择器具有很低的特殊性。类选择器具有更高特殊性，所以将战胜元素选择器。个位在整个选择器中每包含一个元素选择器或伪元素就在该列中加分。 在实际的工作中，我们可能还有些疑惑，当有多个选择器作用在一个元素上时，哪个规则最终会应用到元素上？其实这是通过层叠机制来控制的，这也和样式继承(元素从其父元...
摘要：类选择器具有更高的专用性，所以将战胜元素选择器。个位在整个选择器中每包含一个元素选择器或伪元素就在该列中加分。选择器六明显地输给了了五，其专用性值为和它在链中少了一个元素选择器。当有多个选择器作用在一个元素上时，哪个规则最终会应用到元素上？ 其实这是通过层叠机制来控制的，这也和样式继承(元素从其父元素那里获得属性值)有关。 元素的最终样式可以在多个地方定义，它们以复杂的形式相互影响。这些复杂...
摘要：我们知道字体属性在任意时刻都只能应用一种设定那此时该应用哪种字体呢为解决类似的冲突确定哪条规则胜出并最终被应用提供了三种机制继承层叠和特指。层叠规则层叠规则一找到应用给每个元素和属性的所有声明。层叠规则五设定的永远大于继承的。 在一个较大的样式表中,可能会有很多条规则都选择同一个元素的同一个属性。比 如,一个带有类属性的段落,可能会被一条以标签名作选择符的规则选中并指定一 种字体,而另...
摘要：例如如果想让和的文本都变成蓝色粗体可以这么写也可以这么写分组选择符以逗号作为分隔符第三种方法多条规则应用给一个选择符。上下文选择符以空格作为分隔符特殊的上下文选择符子选择符格式如下标签标签标签必须是标签的父元素，不能是其它的祖先元素。 css 工作原理 每个html元素都有一组样式属性，可以通过css来设定。当html元素的同一个样式属性有多种样式值的时候，css就要靠层叠机智来决定最...
阅读 1205·2021-11-11 16:54
阅读 1718·2021-10-13 09:40
阅读 916·2021-10-08 10:05
阅读 3477·2021-09-22 15:50
阅读 3642·2021-09-22 15:41
阅读 1708·2021-09-22 15:08
阅读 2308·2021-09-07 10:24
阅读 3552·2019-08-30 12:52
