CSS“！important”似乎不起作用

Question

我的CSS按以下顺序排列：

B, STRONG
{
    color: #333;
}
A
{
    color: #00ae9d !important;
    border-bottom: dotted 1px #00ae9d;
    text-decoration:none;
}

但是当我拿着一个链接时，它会变成带有绿点的灰色。我需要做什么才能使粗体物品呈现深灰色，并且链接的粗体物品会变成绿色点？有没有办法对每条规则进行排名？

Answer 1

行为取决于您设置代码的顺序

<b><a href="#">One</a></b>

与

不同

<a href="#"><b>One</b></a>

检查this jsfiddle

Answer 2

为您需要执行的<a>提供颜色遵循LoVe HAte规则：

L (link) o * V * (visited) e H (hover) A (active)叔

a:link {
 color: #00ae9d;
}
a:visited {
 color: #999;
}
a:hover {
 color: #900;
}
a:active {
 color: #555;
}
a:focus {
 color: #900;
}

当然你可以对它们进行分组，但你必须保持相同的顺序。

a:link, a:visited {
 color: #00ae9d;
}
a:hover, a:active, a:focus {
 color: #900;
}