情景再现
这是我今天写一个小demo时发现的自己一直忽视的问题。先截取一下我的代码片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
#box {
color: green !important;
}
.pink-text {
color: pink;
}
</style>
</head>
<body>
<div id="box">
<div class="pink-text">我是什么颜色？</div>
</div>
</body>
</html>
代码很简单，大家可以猜一下，上面这个文本的颜色是什么颜色的？
答案揭晓
没错，是粉色的，不是绿色的。
但是我一直以为这个地方文本应该是绿色的。因为虽然我给这个文本加了一个pink-text的class，指定文本颜色为粉色，但我同样指定了它的父级，也就是id为box的div的字体颜色为绿色，并在后面加了！important。那它的优先级应该最高才对，为什么依然被它本身的样式覆盖了呢？
分析
于是我去查了一下，得到的结论是，虽然这边class为pink-text的div继承了id为box的div的样式，但它自己也被指定了样式。
而 ！important不影响继承性 ，也就是说，继承过来的！important无法提升它的权重，权重该是0还是0。那么自然在它自己已经被指定样式的情况下，它的样式就可以覆盖继承过来的带有！important的样式了。
只有大家都是继承而来的属性或者都是被指定的样式的时候，！important的权重提升才会有作用。
变式
在刚才的基础上，如果是下面这样的代码，文本颜色又是什么颜色的呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style>
#box > .pink-text {
color: green !important;
}
.pink-text {
color: pink;
}
</style>
</head>
<body>
<div id="box">
<div class="pink-text">我是什么颜色？</div>
</div>
</body>
</html>
没错，这个地方就是绿色的了。可以看到，这里使用了子元素选择器“>”。虽然根据就近原则，文本颜色应该还是粉色，但是由于上面的样式增加了！important，此时权重提升有效，自然就可以覆盖下面那个近的样式了。
这时候，即使用“style=‘color:red;’”的行内样式，也依然覆盖不了加了！important的样式。
附一下css的优先级排序：
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
小结
我一直认为！important是无论在什么情况下，只要加了就可以影响到的，是最高优先级；现在经过这个之后我明白，虽然它确实是最高优先级，但它的权重提升是有条件的，不是无论什么情况下都好使的。如果大家和我一样有这个错误的观点，要赶紧把它纠正过来。这算是一个比较低级的错误，但也确实好好给我上了一课，也督促我后面一定要更加细心。
605
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
