CSS 疑似クラスは偶数および奇数のリスト項目をスタイルできますか?

CSS 疑似クラスを使用した偶数要素と奇数要素のスタイル

質問:

CSS は可能疑似クラスを利用して、リスト内の偶数要素と奇数要素を選択してスタイル設定することができますか?色が交互に切り替わるリストが意図された結果ですが、青色の項目のみを含むリストが生成されます。

例:

次のコードはリストを生成すると予想されます。緑と赤の色のアイテムが交互に表示されますが、代わりにすべてのアイテムがblue.

li { color: blue }
li:odd { color:green }
li:even { color:red }

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

答え:

偶数要素と奇数要素を正しくスタイルするには、次の代わりに :nth-child 疑似クラスを使用する必要があります。奇妙で:even:

li {
    color: black;
}
li:nth-child(odd) {
    color: #777;
}
li:nth-child(even) {
    color: blue;
}

<ul>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
    <li>ho</li>
</ul>

デモ: [JSfiddle](http://jsfiddle.net/thirtydot/K3TuN/1323/)

以上がCSS 疑似クラスは偶数および奇数のリスト項目をスタイルできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。