Question

如果已经提出这个问题，我很抱歉，但我无法在这里或谷歌找到答案。我有一个我正在建设的网站，我希望导航栏中的链接为白色，但我希望身体的其余部分都有蓝色链接。这应该很简单，但由于某种原因，我的CSS无法实现这一目标。我将我的代码放在下面，我使用SCSS，所以语法有点不同，但我已经检查过，当我格式化时我的CSS文件是正确的。

nav {
@include border-radius(5px);
background-color: $navbackground;
width: 99%;
position: fixed;
padding: 2% 0 2% 0;
text-align: center;
    a {
        color: $fontcolor;
        margin: 0 5% 0 5%;
        &:hover {
        text-decoration: underline;
        }
    }
}

body {
    font-family: "Lato", sanserif;
    background-image: url("../images/homebackground.png");
    a {
        @include text-shadow(#000);
        color: $linkcolor;
        text-decoration: none;
        &:hover {
        text-decoration: underline;
        }
    }
}

我也尝试过移动颜色：$ fontcolor;导航而不是导航a，但这也不起作用。我知道我可以使用内联样式来实现这一点，但我更喜欢将所有样式保存在CSS文件中。提前谢谢！

$ fontcolor = white $ linkcolor = blue

Answer 1

根据您的CSS，您在两个选择器上实际上都具有相同的specificity level

导航一个机构a 0 0 0 2

http://codepen.io/anon/pen/YGZvRL

因此，最后声明的样式具有优先权，在本例中为正文样式。快速解决方案只是改变声明的顺序：

首先是一般风格body
特定样式nav

http://codepen.io/anon/pen/XjkYoN

或者只是增加导航选择器的特异性。

http://codepen.io/anon/pen/vXdAba

Answer 2

这个怎么样？

a{
    color: #357;
}

.navBar > a {
    color: #fff;
}

如何使用不同颜色的导航链接而不是身体中的链接？

2 个答案: