下划线颜色与链接颜色不同

Question

我正在使用bootstrap和SASS，并且得到了这个奇怪的问题。我将所有h1-6元素的链接颜色设置为#333，对于hover也是如此。

我的站点上的其他链接使用红色样式，该颜色存储在变量$primary-color中。

对于我的链接，#333颜色适用于标题链接，但它似乎继承了下划线的红色。这是一张图片和下面的SASS代码。

​

​

 a {
    color:$primary-color;
    &:hover {
        color:darken($primary-color, 10%);
    }
    h1,h2,h3,h4,h4,h5,h6 {
        color: #333;
        &:hover {
            color: #333 !important;
        }
    }
}

Answer 1

当然，h1:hover是#333，但h1:hover a:hover是red。结果是红色的。

您需要在hx中声明a，因此：

h1, h2, h3, h4, h5, h6 {
    color: #333;
    &:hover a { /* if links has to be shadow in non=hover state too, there could be only "a" without previous "&:hover " */
        color: #333; /* no important is needed */
    }
}