4

フィドルから始めるhttp://jsfiddle.net/sujesharukil/j5acY/

2 つの ul 要素があります。どちらも李が左に浮いています。CSS は、タイル構造を作成します。nth-child(even) と nth-child(odd) を使用して、li 要素の背景色を交互に変更しています。これは、5 つの li 要素が連続する最初の UL では問題なく機能します。ただし、2 番目の場合、連続する li 要素は 4 つだけです。そのため、偶数と奇数は背景色を正しく設定しますが、交互に見えません。各行の最初の要素が交互の色になるように、2 番目の UL の li を交互にするにはどうすればよいですか?

私が理にかなっていることを願っています！

ul li:nth-child(even){
    background-color: #6a8bab;
}

ul li:nth-child(odd){
    background-color: rgb(106, 170, 126);
}

http://www.clipular.com/c?5949919=sZxixdiI2WDpJIW27yoP4qoTreQ&f=.png

4

1 に答える 1

4

できますが、行数によって異なります。行が 2 つしかない場合は、次のように動作します。

ul.four li {
    background-color: silver;
}


ul.four li:nth-child(5n+1), ul.four li:nth-child(5n+3)   {
    background-color: black;
}

http://jsfiddle.net/j5acY/1/

これは、1 番目から始めて 5 番目の要素ごとに繰り返され、3 番目から再び始まります。基本的には左上から右下への対角線です。左下が黒にならないため、3行目を追加すると壊れるため、たとえば次のように手動で選択する必要がありますul.four li:nth-child(9)

http://jsfiddle.net/j5acY/2/

もちろん、別の行を追加すると、再び壊れます。最後の例で使用した場合でもul.four li:nth-child(5n+9)、セレクターul.four li:nth-child(5n+3)が誤って一致し始め、13 番目の要素と誤って一致するという制限に達しました。次に、次を使用して手動でシルバーに戻すことができますul.four li:nth-child(13)。

http://jsfiddle.net/j5acY/3/

もちろん、これは、正方形を黒に設定する以前のルールの後で行う必要があります。ご覧のとおり、行を追加する場合は更新し続ける必要があります。

別のアプローチは無限にスケーラブルですが、前もってより多くの作業が必要であり、さらに列が追加されてもスケーリングされません。このアプローチでは、1 番目から始まり、3 番目、6 番目、最後に 8 番目の要素を 8 番目ごとに繰り返します。

ul.four li:nth-child(8n+1), ul.four li:nth-child(8n+3),
ul.four li:nth-child(8n+6), ul.four li:nth-child(8n+8){
    background-color: black;
}

http://jsfiddle.net/j5acY/4/

ご覧のとおり、行数は関係ありません。ただし、列を追加するとすぐに壊れます。6 列を使用する場合は、12 番目の要素ごとに繰り返すように再計算し、余分な列を処理するためにさらに追加する必要があります。

于 2013-05-17T08:18:39.680 に答える