为什么在类应该覆盖链接样式时需要 !important ？

Question

我正在尝试为页内导航创建可重用的样式。有一个默认样式，通过 ID 分配给封闭的

元素。我还需要为该 元素中的某些特殊

元素提供替代样式。

我将一个类分配给一个 元素，然后尝试对其进行样式设置，结果好坏参半。一些属性发生了变化，但其他属性只有当我用“！important”强制覆盖时才发生变化。

虽然我可以做到这一点，但感觉就像是黑客攻击。为了正确定位这些特定链接，我缺少什么？

#page-nav a {
    border: 2px solid black;
    border-radius: .3rem;
    padding: .25rem .5rem;
    line-height: 2.25;
    text-decoration: none;
    font-weight: 700;
    color: black;
}
#page-nav a:hover {
    background-color: black;
    color: white;
}
a.pageNavAlt:link {
    background-color: black;              /* WORKS        */
    /* color: red;                           DOESN'T WORK */
    color: red !important;                /* WORKS        */
}
a.pageNavAlt:hover { 
    /* background-color: darkred;
    color: yellow;                           DOESN'T WORK */
    background-color: darkred !important; /* WORKS        */
    color: yellow !important;             /* WORKS        */
}

<nav id="page-nav">
    <a class="pageNavAlt" href="#">Alternate link</a> <a href="#">Standard link 1</a> <a href="#">Standard link 2</a>
</nav>

因为

#page-nav a

（和

#page-nav a:hover

）由于使用了

id

而在CSS规则中具有更高的优先级。因此，

a.pageNavAlt:hover

are 中的样式已被应用，但被

#page-nav a:hover

中的样式所推翻。

您可以将

id

选择器添加到其他样式中：

#page-nav a {
    border: 2px solid black;
    border-radius: .3rem;
    padding: .25rem .5rem;
    line-height: 2.25;
    text-decoration: none;
    font-weight: 700;
    color: black;
}
#page-nav a:hover {
    background-color: black;
    color: white;
}
#page-nav a.pageNavAlt:link { /* <-- here */
    background-color: black;
    color: red;
}
#page-nav a.pageNavAlt:hover {  /* <-- and here */
    background-color: darkred;
    color: yellow;
}

<nav id="page-nav">
    <a class="pageNavAlt" href="#">Alternate link</a> <a href="#">Standard link 1</a> <a href="#">Standard link 2</a>
</nav>

Answer 1

因为

#page-nav a

（和

#page-nav a:hover

）由于使用了

id

而在CSS规则中具有更高的优先级。因此，

a.pageNavAlt:hover

are 中的样式已被应用，但被

#page-nav a:hover

中的样式所推翻。

您可以将

id

选择器添加到其他样式中：

#page-nav a {
    border: 2px solid black;
    border-radius: .3rem;
    padding: .25rem .5rem;
    line-height: 2.25;
    text-decoration: none;
    font-weight: 700;
    color: black;
}
#page-nav a:hover {
    background-color: black;
    color: white;
}
#page-nav a.pageNavAlt:link { /* <-- here */
    background-color: black;
    color: red;
}
#page-nav a.pageNavAlt:hover {  /* <-- and here */
    background-color: darkred;
    color: yellow;
}

<nav id="page-nav">
    <a class="pageNavAlt" href="#">Alternate link</a> <a href="#">Standard link 1</a> <a href="#">Standard link 2</a>
</nav>