0

水平ナビゲーション バーを作成していますが、スタイルを設定しようとしている順序付けられていないリストがあります。ボタンがホバーされたときに、各リスト項目が異なる色で表示されるようにします。これを行うためにli、 main 内で別のものを参照していますul。私の問題はid、ヘッダー内で呼び出された紫を参照できないように見えることです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をターゲットにすることidです-sなしで。そのようです：

#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 に答える