css - CSS链接烦人的问题

Question

好的，所以我已经为我的链接设置了这样的样式：

a:link{ color: red; }
a:visited{ color: red; }
a:hover{ color: blue; }
a:active{ color: red; }

a { text-decoration: none; }

现在我还有一个页脚部分#footer，我想对其中的所有链接应用不同的颜色，如下所示：

#footer a:link{ color: green; }
#footer a:visited{ color: green; }
#footer a:hover{ color: yellow; }
#footer a:active{ color: green; }

问题是我还有一个与#footer 内的一类.button 的链接：

.button { color: cyan; background: gray; border: none; }

页脚内链接的样式覆盖了我的按钮的“颜色”，因此它变为绿色而不是青色。

我已将页脚链接的样式放在我的 CSS 底部，但它不起作用。

我知道我可以在按钮的“颜色”上使用“！重要”，但我只是想知道是否有其他方法可以解决这个问题。谢谢！

score 2 · Accepted Answer

尝试这个：

#footer a.button:link { color: cyan; background: gray; border: none; }

它将覆盖其他样式，因为它更具体。它针对任何“未访问的”“a”元素，其按钮类位于 ID 为“footer”的元素内。

CSS-tricks 是一个很好的 CSS 资源，有一篇很好的文章： http ://css-tricks.com/specifics-on-css-specificity/

score 1 · Accepted Answer

您遇到了specificity的问题。

比规则#footer a:link更具体.button（103 vs 10），因此它会覆盖它。

button因此，您需要针对页脚内部的 s制定更具体的规则。例如，这可能是：

.button, #footer a.button:link { color: cyan; background: gray; border: none; }

score 0 · Accepted Answer

0

特异性不够高。.button你可以加上前缀#footer来做到这一点。

于 2013-03-26T12:19:14.693 回答

score 0 · Accepted Answer

尝试使用按钮的完整路径：

#footer a.button:link { color: cyan; background: gray; border: none; }

或者你也可以同时保留

.button,
#footer a.button:link { color: cyan; background: gray; border: none; }

score 0 · Accepted Answer

id 是比类更强的选择器。

这就是为什么你必须使用 #footer .button

例如在这样的标记中

<div class="red" id="green">Some text</div>

并使用以下CSS：

#green{color: green}
.red{color:red }

结果将是绿色的，即使类.red声明在样式表中比#green 晚

Id 规则可以被!important或内联样式覆盖。

在 codepen 上检查这里

5 回答 5