10

行のリストがあり、それぞれに値が1〜5liの属性があります。data-status

<ul>
    <li data-status="1"></li>
    <li data-status="2"></li>
    <li data-status="2"></li>
    <li data-status="1"></li>
    <li data-status="1"></li>
    <li data-status="2"></li>
    <li data-status="3"></li>
    <li data-status="4"></li>
    <li data-status="5"></li>
    <li data-status="5"></li>
    <li data-status="1"></li>
</ul>

liが 1である奇数ごとdata-statusに異なる背景を持たせたいのですが、CSS で行うことは可能ですか?

4

3 に答える 3

14

問題が、特定の属性を持つすべての奇数要素を選択する方法である場合は? 、その後、他の回答でどのように説明されているかが可能です。

li[data-status="1"]:nth-child(2n+1) {
   background: #f00;
}

またはさらに簡単な方法で：

li[data-status="1"]:nth-child(odd) {
   background: #f00;
}

仕組みについては、この良い記事をご覧くださいnth-child。

代わりに、特定の属性を持つすべての要素を選択し、そのサブリストの奇数のみを選択する方法が問題である場合は? 、まあ、それは CSS ではまだ可能ではありませんが、CSSセレクターレベル 4では可能です。nth-match()

:nth-match(An+B of <selector>)

あなたの場合は

li:nth-match(2n+1 of [data-status="1"])

また

li:nth-match(odd of [data-status="1"])

待ちましょう... CSS4 が来ます !! ：P

編集: Michael_B によって報告されたように、この機能は CSS4 仕様によって削除されているため、待つのをやめて別の方法を考え始めてください:/

于 2013-05-30T12:33:36.600 に答える
3

私はあなたができると信じています

li[data-status="1"]:nth-child(odd) {
    background: #f90;
}

http://jsfiddle.net/adamh/ggtff/に実例があります

于 2013-05-30T12:14:32.277 に答える