详解CSS样式覆盖规则
如果有人问你，css是什么？你可能很快就能说出答案——“层叠样式表”。不错CSS的全称叫做“层叠样式表”，那么，你知道为什么叫做层叠呢？其实，“层叠”指的就是样式的覆盖。当一个元素被运用上多种样式，并且出现重名的样式属性时，浏览器必须从中选择一个属性值。但对于初学者而言，常常会搞不清楚浏览器到底会选择哪个值，即谁覆盖了谁。下面为大家详细解读，有此需求的朋友可以参考下，希望对大家有所帮助。
如果你还没弄懂什么是样式覆盖的话，我们不妨先看一个代码片段：
p{color:red;background:yellow}
p{color:green}
以上的段落最终将呈现绿色的字体，并带有黄色的背景，这是因为最后定义的color:green将之前定义的red覆盖掉了，至于黄色背景为何没有消失，那是因为第二个p的定义中并没有与之冲突的定义，因此它还是有效的。
这样一说，你对样式覆盖有一个初步印象了吧！
弄清楚了什么是样式覆盖之后，接下来我们就要了解样式到底是谁覆盖谁了，即样式的覆盖规则。由于多情况都会导致一个元素被运用上多种样式，因此样式覆盖的规则也需要根据不同的情况来定，具体规则如下。
规则一：由于继承而发生样式冲突时，最近祖先获胜
CSS的继承机制使得元素可以从包含它的祖先元素中继承样式，考虑下面这种情况：
<html>
<head>
<title>rule 1</title>
<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。
规则四：样式权值相同时，后者获胜
考虑下面这种情况
<p
class=”byline”>Written
by <a
class=”email”
href=”mailto:[email protected]
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样式覆盖规则就是课课家网站分享给大家的全部内容了。通过本文的学习，现在你对样式到底是谁覆盖了谁，应该心中有数了吧！
