参照ul内の別のliセレクタ

私は水平ナビゲーションバーを作成しています。私はスタイルを設定しようとしている順序のないリストを持っています。ボタンを押したときに、それぞれのリストアイテムに異なる色を表示させたい。これを行うには、ul内の別のliを参照しています。私の問題は、idの中で紫と呼ばれるidを参照できないようです。何か案は？参照ul内の別のliセレクタ

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

出典

2012-04-29 monkey64

それは

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

は、そのセレクタに余分なLiが存在していないです...だけではないでしょうか？

出典

2012-04-29 08:26:35 joshp

Joshp。あなたは正しいです。どうもありがとう。 – monkey64

IDはHTML文書全体を通して曖昧ではないので、 '#purple a：hover {color：red}'だけで十分です。 – feeela

@feeela *は明白でなければなりません; p –

idを使わないで:first-childセレクタを介して最初のliをターゲットにすることもできます。これと同じように：このIDのようなもののために

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

出典

2012-04-29 08:42:21 skip405

クラスを使用しますが、このような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-29 10:14:21 SmithMart

参照ul内の別のliセレクタ

答えて

関連する問題