Question

我正在创建一个水平导航栏，我有一个无序列表，我试图设置样式。我希望每个列表项在悬停按钮时显示不同的颜色。为此，我在主li中引用了单独的ul。我的问题是我似乎无法在标题id中引用名为purple的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>

Answer 1

不应该只是......

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

该选择器中是否有额外的li？

Answer 2

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

#header li:first-child a:hover{
    color: red;
}

Answer 3

对于像这样的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>

马丁

在ul中引用单独的li选择器

3 个答案: