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>，而不是祖先。

Answer 2

.ui-tabs .ui-state-active a:link {
color: #E6EFEA !important;
}

这应该做的事情。

您需要在标签上设置颜色而不是.ui-state-active类。

Answer 3

您还必须指定：link

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

Answer 4

通过这种方式，您可以为列表中的点着色...

试试这段代码：

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