当前页面导航不同颜色

问题描述：

我不认为标题很好地解释了我的问题。基本上，在我的导航栏上，我希望当前页面具有不同的颜色。当前页面导航不同颜色

例如，如果所有的导航链接都是黑色的，我希望当前的家庭页面是红色的。我已经尝试通过给当前页面链接一个类，然后定义一个颜色，但它似乎并没有改变。

<style> 
.box { 
text-align: center; 
background-color: #F1F2F2; 
border: 1.5px #D1D3D4 solid; 
border-bottom: 3px solid red; 
    margin: 5px; 
    padding: 10px; 
} 
p { 
font-size: 15px; 
font-family: arial; 
color: #585858; 
} 
.logo { 
margin-left:70px; 
margin-top: -160px; 
} 
a:visited { 
    text-decoration: none; 
    color: black; 
    font-weight: normal; 
} 
a:link { 
    text-decoration: none; 
    color: black; 
    letter-spacing: 500; 
} 
a:hover { 
    text-decoration: none; 
    color: #FC3B3B; 
    background: white; 
} 
a:active { 
    text-decoration: none; 
    color: red; 
    font-weight: normal; 
} 

ul { 
list-style-type:none; 
margin-right:50px; 
margin-top: 60px; 
padding:5px; 
overflow: hidden; 
font-family: 'Paytone One', sans-serif; 
font-size: 18px; 
} 
li { 
display:inline; 
float:right; 
margin-right: 30px; 
} 
.current { 
font-family: 'Paytone One', sans-serif; 
font-size: 18px; 
color:red; 
} 
</style>

<body> 
<ul> 
<li><a href="index.html"/>HOME</a></li> 
<li><a href="blog.html"/>BLOG</a></li> 
<li><a href="photo.html" class="current"/>PHOTOS</a><li> 
<li><a href="projects.html"/>PROJECTS</a></li> 
</ul> 

</br> 
<img class="logo" src="louis2.png" alt="." width="149px" height="150px"/> 
<div class="box"> 

</div> 
<div class="box1"> 
</div> 
<p>louismoore.net © All rights reserved 2012</p> 
</body>

答

你的问题是specificity。

尝试

a.current改为。

另外，从您的A标签中删除/。应该是结构化的<a>...</a>

详细说明，将样式设置为红色的CSS将被您的'a：link'选择器覆盖。您可以通过检查浏览器的开发人员工具中的元素来看到这一点。 – Zhihao

我刚刚给出了同样的答案，原因是“......但我不知道为什么。”感谢您的链接。 – iamnotmaynard

答

a:link有比.current（只是一个类）更多的说明符（标记名称和伪类）。你可以这样

a.current

，因为有标记名和一个类，它覆盖标记名和伪类覆盖它。

答

我会建议一种不同的方法，而不是将类应用到每个页面的相应链接，因为您需要更改每个不同页面的导航标记。一类添加到每一页识别页面的主体，然后添加其他类的各个环节，标识的链接，然后写CSS，结合了他们：

.home .home_link, 
.blog .blog_link, 
.photos .photos_link, 
.projects .projects_link { 
    color: red; 
}

这样，CSS是不必自动应用为每个页面的导航编写不同的标记。

这里是一个jsfiddle来演示。

为了减少标记，为什么不使用CSS属性选择器？ '.home ul li a [href =“index.html”]，... {...}' – oomlaut

这是您可以采取的另一种方法，只要不担心IE6。 – kinakuta

当前页面导航不同颜色

相关推荐