详解CSS样式覆盖规则

作者：课课家教育来源： http://www.kokojia.com点击数：1833发布时间： 2016-10-24 10:00:18

如果有人问你，css是什么？你可能很快就能说出答案——“层叠样式表”。不错CSS的全称叫做“层叠样式表”，那么，你知道为什么叫做层叠呢？其实，“层叠”指的就是样式的覆盖。当一个元素被运用上多种样式，并且出现重名的样式属性时，浏览器必须从中选择一个属性值。但对于初学者而言，常常会搞不清楚浏览器到底会选择哪个值，即谁覆盖了谁。下面为大家详细解读，有此需求的朋友可以参考下，希望对大家有所帮助。

详解CSS样式覆盖规则_CSS_样式覆盖_CSS基础_课课家

　　如果你还没弄懂什么是样式覆盖的话，我们不妨先看一个代码片段：

　　p{color:red;background:yellow}

　　p{color:green}

　　以上的段落最终将呈现绿色的字体，并带有黄色的背景，这是因为最后定义的color:green将之前定义的red覆盖掉了，至于黄色背景为何没有消失，那是因为第二个p的定义中并没有与之冲突的定义，因此它还是有效的。

　　这样一说，你对样式覆盖有一个初步印象了吧！

　　弄清楚了什么是样式覆盖之后，接下来我们就要了解样式到底是谁覆盖谁了，即样式的覆盖规则。由于多情况都会导致一个元素被运用上多种样式，因此样式覆盖的规则也需要根据不同的情况来定，具体规则如下。

　　规则一：由于继承而发生样式冲突时，最近祖先获胜

　　CSS的继承机制使得元素可以从包含它的祖先元素中继承样式，考虑下面这种情况：

　　<html>

　　<head>

　　<style>

　　body {color:black;}

　　p {color:blue;}

　　</style>

　　</head>

　　<body>

　　<p>welcome to <strong>gaodayue的网络日志</strong></p>

　　</body>

　　</html>

　　strong分别从body和p中继承了color属性，但是由于p在继承树上离strong更近，因此strong中的文字最终继承p的蓝色。

　　规则二：继承的样式和直接指定的样式冲突时，直接指定的样式获胜

　　在上面的例子中，假如还指定了strong元素的样式，如：

　　strong {color:red;}

　　那么根据规则二，strong中的文字最终显示为红色。

　　规则三：直接指定的样式发生冲突时，样式权值高者获胜

　　样式的权值取决于样式的选择器，权值定义如下：

　　标签选择器1

　　类选择器10

　　ID选择器100

　　内联样式1000

　　伪元素(:first-child等)1

　　伪类(:link等)10

　　可以看到，内联样式的权值>ID选择器>类选择器>标签选择器。

　　除此以外，后代选择器的权值为每项权值之和，比如”#nav.currenta”的权值为100+10+1=111。

　　规则四：样式权值相同时，后者获胜

　　考虑下面这种情况

　　class="byline">Written

　　 by <a

　　class="email"

　　href="mailto:jean@cosmofarmer.

　　 com">Jean

　　Graine de Pomme</a></p>

　　.byline

　　a {color:red;}p

　　 .email {color:blue;}

　　“.bylinea”与”p.email”都直接指定了上面的a元素，且权值都为11，根据规则四，最终显示蓝色。

　　由于样式表可以是外部的，也可以是内部的，规则四提醒我们要注意外部样式表引入的顺序（及<link>元素的顺序），以及外部样式表与内部样式表的出现位置。一般来说，内部样式表出现在所有外部样式表的引入之后，一般是在</head>之前。

　　规则五：!important的样式属性不被覆盖

　　如果你一定要采用某个样式属性，而不让它被覆盖的，可以在属性值后加上!important。但我们课课家网站并不推崇这种做法。以规则四的例子为例，”.bylinea{color:red!important;}”可以强行使链接显示红色。但大多数情况下都可以通过其他方式来控制样式的覆盖。所以不是万不得已的时候，不要滥用!important。

　　以上这篇详解CSS样式覆盖规则就是课课家网站分享给大家的全部内容了。通过本文的学习，现在你对样式到底是谁覆盖了谁，应该心中有数了吧！

踩(0)

分享到：

上一篇：浅谈如何学习div+css

下一篇：浅析C#接口Interface的用法