CSS规则的继承与层叠

snowell 发布于2019-08-28 18:06 / 485人阅读

摘要：我们知道字体属性在任意时刻都只能应用一种设定那此时该应用哪种字体呢为解决类似的冲突确定哪条规则胜出并最终被应用提供了三种机制继承层叠和特指。层叠规则层叠规则一找到应用给每个元素和属性的所有声明。层叠规则五设定的永远大于继承的。

在一个较大的样式表中,可能会有很多条规则都选择同一个元素的同一个属性。比
如,一个带有类属性的段落,可能会被一条以标签名作选择符的规则选中并指定一
种字体,而另一条以该段落的类名作选择符的规则却会给它指定另一种字体。我们
知道,字体属性在任意时刻都只能应用一种设定,那此时该应用哪种字体呢?为解
决类似的冲突,确定哪条规则“胜出”并最终被应用,CSS 提供了三种机制:继承、层叠和特指。

继承

CSS 中有很多属性是可以继承的,其中相当一部分都跟文本有关,比如颜色、字体、
字号。然而,也有很多 CSS 属性不能继承,因为继承这些属性没有意义。这些不能
继承的属性主要涉及元素盒子的定位和显示方式,比如边框、外边距、内边距。

层叠

浏览器有五个样式来源，其顺序如下：
1. 浏览器默认样式表
2. 用户样式表
3. 作者链接样式表(按照它们链接到页面的先后顺序)
4. 作者嵌入样式
5. 作者行内样式

浏览器会按照上述顺序依次检查每个来源的样式,并在有定义的情况下,更新对每
个标签属性值的设定。整个检查更新过程结束后,再将每个标签以最终设定的样式
显示出来。

层叠规则

层叠规则一:找到应用给每个元素和属性的所有声明。浏览器在加载每个页面时,都会据此查到每一条 CSS 规则,标识出所有受到影响的 HTML 元素。

层叠规则二:按照顺序和权重排序。浏览器依次检查5个来源,并设定匹配的属性。如果匹配的属性在下一个来源也有定义,则更新该属性的值,如此循环,直到检查完页面中所有标签受影响属性的全部5个来源为止。最终某个属性被设定成什么值,就用什么值来显示。

层叠规则三:按特指度(优先级)排序。除了有点拗口之外,特指度(specificity)其实表示一条规则有多明确。如果没有特指度的考量,那为了让恰当的样式起作用,恐怕我们就免不了要频繁变换样式表中规则的顺序了。

I-C-E 方法计算特指度：
1. 选择符中有一个 ID,就在 I 的位置上加 1;
2. 选择符中有一个类,就在 C 的位置上加 1;
3. 选择符中有一个元素(标签)名,就在 E 的位置上加 1;
4. 得到一个三位数。

举一个简单的例子：

p       --->    0-0-1特指度为001=1
div#nav p.fist      --->    1-1-2特指度112=112

层叠规则四:顺序决定权重。如果两条规则都影响某元素的同一个属性,而且它们的特指度也相同,则位置最靠下(或后声明)的规则胜出。

层叠规则五:设定的永远大于继承的。从父级继承下来的规则，不管特指度有多大，都会被设定的规则覆盖。

私有云海外云主机 css与html的区别 html与css的区别继承与多态 python类与继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111024.html

不知道层叠，别说你懂CSS

摘要：知道存在是很有用的，这样当你在别人的代码中遇到它时，你就知道它是什么了。如上面所示的示例所示，元素选择器具有很低的特殊性。类选择器具有更高特殊性，所以将战胜元素选择器。个位在整个选择器中每包含一个元素选择器或伪元素就在该列中加分。在实际的工作中，我们可能还有些疑惑，当有多个选择器作用在一个元素上时，哪个规则最终会应用到元素上？其实这是通过层叠机制来控制的，这也和样式继承(元素从其父元...

izhuhaodev 2019-08-30 14:03 评论0 收藏0
CSS学习笔记(四) CSS优先级

摘要：为了解决冲突，确定哪条规则胜出并最终被应用，提供了三种机制继承层叠和特指。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。层叠规则四顺序决定权重。规则三设定的样式胜过继承的样式，此时不用考虑特指度即显式设定优先。为了解决冲突，确定哪条规则胜出并最终被应用，CSS提供了三种机制：继承、层叠和特指。 1.继承 CSS 中的祖先元素会向后代传递一样东西：CSS属性...

高胜山 2019-08-28 18:01 评论0 收藏0
CSS学习摘要-层叠和继承

摘要：类选择器具有更高的专用性，所以将战胜元素选择器。个位在整个选择器中每包含一个元素选择器或伪元素就在该列中加分。选择器六明显地输给了了五，其专用性值为和它在链中少了一个元素选择器。当有多个选择器作用在一个元素上时，哪个规则最终会应用到元素上？其实这是通过层叠机制来控制的，这也和样式继承(元素从其父元素那里获得属性值)有关。元素的最终样式可以在多个地方定义，它们以复杂的形式相互影响。这些复杂...

mating 2019-04-23 13:40 评论0 收藏0
你不知道的层叠样式表

摘要：层叠样式表层叠规则你或许知道是层叠样式表的缩写。但你不一定真正的理解了其中层叠的含义。用户自定义样式虽然规范中有，但从起，开始不支持用户自定义样式表，而是建议使用扩展来实现。网站提供的样式表，则是我们所提供的的样式。即不为的元素的计算值为。层叠样式表层叠规则你或许知道 CSS 是 Cascading Style Sheets（层叠样式表）的缩写。但你不一定真正的理解了其中层叠的含...

Bryan 2019-08-29 16:59 评论0 收藏0
理解层叠样式表中的层叠机制，精准掌握元素样式

摘要：问题在写时，有时候会遇到浏览器中显示的样式和自己的预期不符合的情况，这是因为没有理解的层叠机制。清楚地理解了他这三大法宝，我们就能精准的预测出每个元素在浏览器中的样式了。问题：在写CSS时，有时候会遇到浏览器中显示的样式和自己的预期不符合的情况，这是因为没有理解CSS的层叠机制。例如文档中有一个p元素,用内联样式为他设置了颜色： 2016年10月20日在CSS中又用不同的方式给...

0x584a 2019-08-29 11:27 评论0 收藏0