为何用类覆盖ID下链接样式需加!important？CSS优先级疑问

你的问题核心是CSS选择器优先级导致的样式覆盖：默认样式#page-nav a的权重（ID选择器+元素选择器）高于你定义的a.pageNavAlt:link（元素+类+伪类），所以不加!important时，默认样式会覆盖自定义样式。

正确的选择器定位方案 #

通过提升自定义样式选择器的权重，让它的优先级高于默认样式即可——把父元素的ID选择器#page-nav加到自定义链接的选择器中：

#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 {
    background-color: black;
    color: red; /* 现在无需!important也能生效 */
}
#page-nav a.pageNavAlt:hover { 
    background-color: darkred;
    color: yellow; /* 现在无需!important也能生效 */
}

原理说明 #

CSS选择器权重规则：

• ID选择器权重为100
• 类/伪类选择器权重为10
• 元素选择器权重为1

默认样式#page-nav a的权重是100 + 1 = 101，修改后的自定义样式#page-nav a.pageNavAlt:link权重是100 + 1 + 10 + 10 = 121，权重更高，自然能覆盖默认样式，完全不需要!important。

内容的提问来源于stack exchange，提问作者Joseph Moore