0

この単純なコードは機能していません：

HTML：

<div id="topnav">
    <ul>
        <li><a href="a.html">Aaaaaaa</a></li>
        <li><a href="b.html">Bbbbbbbb</a></li>
        <li><a href="c.html">Ccccccccc</a></li>
    </ul>
</div>

CSS：

#topnav li a:hover:first-child{
    color:#ff0000;
    }

#topnav li a:nth-child(2):hover{
    color:#FF7700;
}

#topnav li a:nth-child(3):hover{
    color:#FFFF00;
}

リンクごとにホバーの色を変える必要があります。それらはすべて赤で表示されます。なんで？

JSFiddle： http: //jsfiddle.net/jeZHD/

4

3 に答える 3

3

<a>親要素ごとに1つしかないためです。つまり、すべて<a>がその親の最初の子です<li>。

<li>代わりに試してみてください。

実例： http： //jsfiddle.net/jeZHD/2/

于 2013-03-10T07:43:43.377 に答える
0

ここ：

#topnav li:nth-child(1) a:hover { color:#ff0000; }
#topnav li:nth-child(2) a:hover { color:#FF7700; }
#topnav li:nth-child(3) a:hover { color:#FFFF00; }
于 2013-03-10T07:46:37.237 に答える
0

liこれに多くの時間を費やした後、私はちょうどn番目の子が'ではなく'にあるべきであることに気づきましたa。そのようです：

#topnav li:first-child a:hover{
    color:#ff0000;
    }

#topnav li:nth-child(2) a:hover{
    color:#FF7700;
    }

    #topnav li:nth-child(3) a:hover{
    color:#FFFF00;
    }
于 2013-03-10T07:46:54.430 に答える