1

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;}

从代码中可以看出，我正在尝试将主页链接的颜色设置为红色。但这显然行不通。我应该怎么做？

4

5 回答 5

0

更改您的 CSS 规则：

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

到

#current {
background-color: red;}

jsFiddle 示例

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

于 2012-09-19T15:32:37.257 回答
0

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

现在您正在尝试使用 id current 设置元素内的链接元素的颜色。

于 2012-09-19T15:32:51.110 回答
0

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

于 2012-09-19T15:34:00.690 回答
0

你的 CSS 不正确。

#current a:link

这是说在具有 Id #current 的元素内设置链接样式

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

a#current { color: red; }

不过最好使用一个类：

a.red { color: red; }

进而：

<a class="red">bla</a>
于 2012-09-19T15:40:02.933 回答
0

正如大家所指出的那样，主要问题是您尝试更改的元素 #current 也是锚标记，因此您必须说 a#current:link 或 #current 而不是 #current a:link 因为锚标记不是#current 标记的子项。

这是我的 jsFiddle，如果你有兴趣的话。

于 2012-09-19T15:40:50.717 回答