Question

PS：如果你在悬停在链接上时仔细观察条形图，最右边的几个像素保持黑色。为什么这样，我该如何解决？

当前导航栏的代码如下：

HTML：

<body>
    <div class="navbar">
        <a href="home.html" id="current">-home</a>
        <a href="about.html">about</a>
        <a href="store.html">store</a>
        <a href="contact.html">contact</a>
    </div>
</body>

CSS：

.navbar{
width: 75%;
background-color: black;
margin-left: auto;
margin-right: auto;
margin-top: 15px;}
.navbar a:link, a:visited{
background-color: black;
color: white;
text-decoration: none;
text-transform: uppercase;
border-right: 2px solid white;
font-weight: bold;
font-family: verdana;
font-size: 37px;
text-align: center;
padding-left: 5px;
padding-right: 5px;}
.navbar a:hover, a:active, a:focus{
background-color: #4A4A4A;
text-decoration: underline;}
#current a:link, a:visited{
background-color: red;}

正如您可以通过代码判断的那样，我正在尝试将主链接的颜色设置为红色。但这显然不起作用。我应该怎么做呢？

Answer 1

从以下位置更改CSS规则：

#current a:link, a:visited{
background-color: red;}

到

#current {
background-color: red;}

<强> jsFiddle example

您的规则指定ID为#current的元素，然后在#current足够时指定它的子链接。

Answer 2

current是link元素的id，因此#current {background-color:red;}应该这样做。

现在，您正尝试在id为current的元素内设置link元素的颜色。

Answer 3

你在CSS中的#current之后忘记了逗号。你不需要休息。您也可以只编写#current或a#current。

Answer 4

您的CSS不正确。

#current a:link

这就是说一个链接INSIDE一个带有Id #current

的元素

但是你的链接是带有id的元素，试试这个：

a#current { color: red; }

最好使用一个类：

a.red { color: red; }

然后：

<a class="red">bla</a>

Answer 5

主要问题，正如每个人都指出的那样，你试图改变#current的元素也是锚标记，所以你必须说＃current：link或#current而不是#current a：link since anchor标记不是#current标记的子标记。

如果你感兴趣的话，请my jsFiddle。

CSS导航栏指示麻烦

5 个答案: