0

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

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

这是我的代码：http: //jsfiddle.net/SCd4h/

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

3 回答 3

5

你的问题是特异性。

尝试

a.current反而。

此外，/从打开的 A 标签中删除。应该结构化<a>...</a>

于 2012-12-28T18:41:01.673 回答
1

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

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

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

这是一个要演示的jsfiddle。

于 2012-12-28T18:44:15.540 回答
0

a:link.current比（只是一个类）有更多的说明符（一个标签名和一个伪类）。你可以通过说覆盖它

a.current

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

于 2012-12-28T18:43:10.770 回答