CSS/CSS3で個々のnav要素を選択する

Question

CSS3でnav要素を選択するにはどうすればよいですか？私が欲しい色に変更 - 推移 -

は私がナビゲーション要素を作ることができるようにしたいです。このような

<nav> 
    <a href="#mainpage">first</a> // i want to make this word, when hovered, into #555 
    <a href="#secondpage">second</a> // i want to make this word, when hovered, into #444 
    <a href="#thirdpage">third</a> //i want to make this word, when hovered, into #643312 
    <a href="#fourthpage">fourth</a> //i want to make this word, when hovered, into #444 
    <a href="#fifthpage">fifth</a> // i want to make this word, when hovered, into #666 
</nav> 

として

は、どのように私は実際にそれをやって行くのですか？私はCSS3セレクターについて読んでいますが、私はすべてのソリューションを（うまく少なくともまだ）が表示されない、ので、私はより速く、ここでスタックオーバーフローにお答えし得るだろうと思ったのだ

。私は何か結果があるかどうかを調べるために検索を続けます。

Answer 1

たぶん、あなたはwhen hovered探している：（わからないあなたの質問は非常に説明的ではありません）

nav a:nth-child(1):hover 
{ 
    color: #555 
} 
nav a:nth-child(2):hover 
{ 
    color: #444 
} 
nav a:nth-child(3):hover 
{ 
    color: #643312 
} 
nav a:nth-child(4):hover 
{ 
    color: #444 
} 
nav a:nth-child(5):hover 
{ 
    color: #666 
} 

JsFiddle.net Example

UPDATE

あなたがしている場合どのようにすべてのNの作品を疑問に思う：

<style> 
nav a:nth-child(3n+0):hover { 
    background-color: #f00; 
} 
nav a:nth-child(3n+1):hover { 
    background-color: #0f0; 
} 
nav a:nth-child(3n+2):hover { 
    background-color: #0f0; 
} 
<style> 

<nav> 
<a href="#mainpage">first</a> 
<a href="#secondpage">second</a> 
<a href="#thirdpage">third</a> 
<a href="#fourthpage">fourth</a> 
<a href="#fifthpage">fifth</a> 
<a href="#sixthpage">sixth</a> 
</nav> ​ 

JsFiddle.net Example

素子（0、3、6、9など）グリーン（＃1 F00）であろう。

素子（1、4、7、10など）ブルー（＃1 0F0）であろう。

要素（2、5、8、11など）は、赤（＃00F）であろう。

Answer 2

チェックこの1：

click here

あなたはこれをしたいですか？

nav a:nth-child(2), 
nav a:nth-child(4), 
nav a:nth-child(6){ 

....something 

} 








nav a:nth-child(2) 
{ 
background:#ff0000; 
} 

Answer 3

これにCSS 2.1ソリューション:)

はあなたの最初のリンクのスタイルをしたい場合は、1秒間、あなたがそうのような兄弟セレクタを使用することができる上、nav a:first-childセレクタを使用することがあります。

nav a:first-child + a{ 
    color: red; //coloring the second link 
} 
nav a:first-child + a + a{ 
    color: green; //coloring the third link 
} 
nav a:first-child + a + a + a{ 
    color: black; //coloring the fourth link 
} 
nav a:first-child + a + a + a + a{ 
    color: yellow; //coloring the fifth link 
} 

このようなソリューションは、最大IE7から動作します。