1

CSS3でナビゲーション要素を選択するにはどうすればよいですか？

ナビゲーション要素を（ホバーしたときに）希望の色に変更できるようにしたいです。

そのような

<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セレクターについて読んでいますが、解決策が見当たらないので（少なくともまだ）、StackOverflowでもっと速い答えが得られると思いました。結果が得られるかどうかを確認するために検索を続けます。

4

3 に答える 3

5

これをチェックしてください：

ここをクリック

これが欲しいですか？

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

....something

}








nav a:nth-child(2)
{
background:#ff0000;
}
于 2012-04-22T00:58:25.317 に答える
2

多分あなたは探しています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の例</p>

アップデート

すべての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の例

要素（0、3、6、9など）は緑（＃f00）になります。

要素（1、4、7、10など）は青（＃0f0）になります。

要素（2、5、8、11など）は赤（＃00f）になります。

于 2012-04-22T00:59:56.470 に答える
1

これにはCSS2.1ソリューションがあります:)

最初のリンクのスタイルを設定する場合は、nav a:first-childセレクターを使用できます。2番目以降のリンクでは、次のように兄弟セレクターを使用できます。

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以降で機能します。

于 2012-04-22T15:38:01.870 に答える