Question

所以我有一个基于UL的相当简单的垂直CSS菜单。

<ul class="vertnav">
<li><a href="unselected1.php">Item1</a></li>
<li><a href="unselected2.php">Item2</a></li>
<li><a href="selected.php" class="vertnavdown">Selected</a></li>
</ul>

我想要三种基本颜色（比如棕色表示默认LI，橙色表示VERTNAVDOWN，红色表示A：HOVER。但是我似乎无法让vertnavdown类继承正确，而.vertnav li a:visited会覆盖它每一次。如果我使用!important迫使它通过我似乎也无法让悬停工作。

有什么建议吗？我以为我理解CSS中的继承，但我想我没有。

.vertnav{
list-style: none;
margin: 0px;
width: 172px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
text-align: left;
height: 45px;
}
.vertnav li{
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
border-bottom: 0px none;
border-right: 0px none;
border-top: 1px solid #fff;
border-left: 0px none;
text-align: left;
height: 45px;
width: 172px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}

.vertnav li a{
display: block;
text-align: left;   
color: #666666;
font-weight: bold;
background-color: #FFEEC1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-decoration: none;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
height: 45px;
}
.vertnav li a:visited{
display: block;
text-align: left;   
color: #666666;
background-color: #FFEEC1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
height: 45px;
}
.vertnav li a:hover{
color: white;
background-color: #ffbf0c;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 45px;
text-decoration: none;
font-weight: bold;
}
.vertnavdown a
{
display:block;
color: #FFF;
background-color: #ff9000;
}
.vertnavdown a:hover
{
background-color: #ffbf0c;
}

^^^^^^^^^^^^^编辑添加CSS。 ^^^^^^

Answer 1

如果你也可以发布css会有所帮助。

您通常需要的是这样的

<ul id="nav"> <li><a>one</a></li> <li class="active"><a>two</a></li> </ul>

css将是：

#nav li{ color: red; } #nav li a:visited{ color: green; } #nav li.active a{ color: blue; }

你需要更加具体的css命名。

Answer 2

.vertnav li a:visited非常具体，在CSS中，更具体的覆盖不太具体，即使稍后的特定CSS在继承链中出现。

.vertnavdown自己将{strong>始终被.vertnav li a:visited覆盖 - 最好的解决方案是更具体地说明您对.vertnavdown的描述。

将.vertnavdown a和.vertnavdown a:hover更改为
.vertnav ul li a.vertnavdown .vertnav ul li a.vertnavdown:hover会解决您的问题。

编辑：

Smacks head 道歉，我应该注意到你正试图解决:visited链接的问题...因为你没有为{{1}指定一个样式它继承了a.vertnavdown:visited的风格。

然后解决方案是将.vertnav a:visited添加到您希望它继承的任何样式声明中。应解决问题。

Answer 3

尝试使用.vertnav li a：visited .vertnavdown

如何使css导航菜单“选中”选项仍然可点击

3 个答案:

编辑：