css - 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>

检查这个jsfiddle

Answer 2

给<a>你需要遵循爱恨规则的颜色：

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

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;
}