Question

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

因此，例如，如果所有导航链接都是黑色的，我希望当前的主页为红色。我试过这个，给当前页面链接一个类，然后定义一个颜色，但它似乎没有改变。

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

Answer 1

您的问题是specificity。

尝试

a.current代替。

另外，从开场A标签中删除/。应该是<a>...</a>

的结构

Answer 2

我建议采用不同的方法，而不是将类应用于每个页面的相应链接，因为您需要为每个不同的页面更改导航的标记。在标识页面的每个页面的主体中添加一个类，然后向每个链接添加另一个类，标识链接，然后编写组合它们的css：

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

这样，自动应用css，而无需为每个页面的导航写入不同的标记。

这是一个jsfiddle来演示。

Answer 3

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

来覆盖它

a.current

因为它有一个tagName和一个类，它会覆盖tagName和伪类。

当前页面导航的不同颜色

3 个答案: