0

我正在创建一个水平导航栏，并且我有一个我正在尝试设置样式的无序列表。当按钮悬停时，我希望每个列表项显示不同的颜色。为此，我li在 main中引用了一个单独的ul. 我的问题是我似乎无法id在 header 中引用被调用的紫色id。有任何想法吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>

<style type="text/css">

body {background-color:#EEEEEE}

#header {list-style-type:none; width:978px; height:35px; margin:0 0 25px 0; padding:0}
#header li {float:left; width:100px; height:29px; background:transparent url(images/menu_grad_0.gif) repeat-x; padding:9px 0 0 10px; margin-right:1px}
#header li a {color:#FFFFFF; font-size:13px; font-weight:bold; display:block; text-decoration: none}
#header #purple li a:hover {color:red}

#container {
    background-color: #6c6b6f;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    text-align: left;
    width: 978px
}

</style>

</head>
<body>

<div id="container">

<ul id="header">
    <li id="purple"><a href="#">&raquo;&nbsp;Home</a></li>
    <li><a href="#">&raquo;&nbsp;About Me</a></li>
    <li><a href="#">&raquo;&nbsp;Contact</a></li>
</ul>

</div><!--Close DIV Container-->

</body>
</html>
4

3 回答 3

4

不应该只是...

#header #purple a:hover {color:red}

那个选择器中没有多余的 li 吗？

于 2012-04-29T08:26:35.093 回答
0

另一种解决方案是通过:first-child选择器定位第一个 li - 没有任何ids。像这样：

#header li:first-child a:hover{
    color: red;
}
于 2012-04-29T08:42:21.333 回答
0

对于像这样的 id 使用一个类，但你可以用这样的 id 来做：

#header li#purple a:hover {color:red}

那会做你想做的，但我个人会使用一个类，因为你可能希望页面上的其他东西是“紫色”的

#header li.purple a:hover {color:red}
<li class="purple"><a href="#">&raquo;&nbsp;Home</a></li>

马丁

于 2012-04-29T10:14:21.150 回答