CSS!重要的不是优先考虑？

Question

我有以下dom结构:

<div class="ui-tabs">
<ul>
    <li class="ui-state-default ui-tabs-selected ui-state-active">
         <a href="#">Text</a>
    </li>
</ul>

以下CSS标记:

.ui-tabs .ui-state-active {
background: #084;
color: #E6EFEA !important;
}

a:link {
color: #00C;
}

我无法获得第一种颜色(E6EFEA)优先.我在FireFox和Chrome上尝试过它,Chrome甚至会显示a:链接属性被划掉......好像其他颜色优先,但仍然呈现蓝色(00C).只是为了确保我已经删除了CSS文件中的所有其他#00C依赖.有任何想法吗？

我还在JSBin上提出了一个粗略的例子.

Answer 1

!important仅在将属性应用于同一元素时才有效.在这种情况下,你把它应用到<a>元素的父元素,而且它是被设置有(扔外面一些文字<a>说服自己).

如果要覆盖<a>元素本身的颜色,则CSS规则必须应用于而<a>不是祖先.