html - すべてのスタイルを設定するにはどうすればよいですかnth-child() を使用した 5 番目と 6 番目を除く

Question

簡単なリストがあります：

<ul>
    <li>Test</li>
    <li>Test1</li>
    <li>Test2</li>
    <li>Test3</li>
    <li>Test4</li>
    <li>Test5</li>
    <li>Test6</li>
    <li>Test7</li>
</ul>

<li>5 + 6 以外はすべて赤にしたい

http://jsfiddle.net/7yDGg/1/

セレクターを 1 つだけ使用してこれを行うことはできますか?

Answer 1

css セレクター:not(target)を使用して、除外する子を明示的に選択します。targetを別のセレクターに置き換えます。

セレクターを組み合わせ:not()て:nth-child()、特定の要素を除外できます。

たとえば、この場合、5 番目と 6 番目の要素を除外してから、 this: :not(:nth-child(5))andを使用し:not(:nth-child(6))ます。

ul li:not(:nth-child(5)):not(:nth-child(6)) {
    color: red; 
}

<ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
    <li>Test 5</li>
    <li>Test 6</li>
    <li>Test 7</li>
</ul>

Answer 2

最も簡単な方法は次のとおりです。

ul li {
    color: red;
}
ul li:nth-child(5), ul li:nth-child(6) {
    color: black;
}

フィドルが更新されました。