CSS导航栏指示问题

PS：如果您仔细观察悬停在链接上最右侧的几个像素保持黑色的酒吧。为什么是这样，我该如何解决它？CSS导航栏指示问题

当前导航栏的代码如下：

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

你可以通过代码知道，我想将家庭链接的颜色设置为红色。但是这显然不起作用。我应该怎么做呢？

来源

2012-09-19 Prooz

当前是链接元素的ID，所以#current {background-color:red;}应该这样做。

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

来源

2012-09-19 15:32:51 Jasha

谢谢！奇迹般有效！ – Prooz

你的CSS规则的改变来自：

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

到

#current { 
background-color: red;}

jsFiddle example

你规则指定的元素与#current的ID，然后它的子链接当#current足够时。

来源

2012-09-19 15:32:37 j08691

您在CSS中出现#current后忘记了逗号。你不需要休息一下。你也可以只写#current或a#current。

来源

2012-09-19 15:34:00 Dev

您的CSS不正确。

#current a:link

这话说的风格与标识#current中的元素链接

但是您的链接与该ID的元素，试试这个：

a#current { color: red; }

那就更好更好使用一个类，但是：

a.red { color: red; }

然后：

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

来源

2012-09-19 15:40:02 Andrew

主要问题，因为每个人都表示，您正在尝试更改#current的元素也是锚标记，因此您必须说＃current：link或#current而不是#current a ：由于锚标记不是#current标记的子项，因此链接。如果您有兴趣，请点击这里my jsFiddle。

来源

2012-09-19 15:40:50 jennyfofenny

CSS导航栏指示问题

回答

相关问题