html - 我如何使用 nth-child() 设置除第五个和第六个以外的所有 样式

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/

这可以只使用一个选择器来完成吗？

Answer 1

使用 css 选择器 :not(target) 明确选择要排除的子项。用另一个选择器替换 target。

我们可以组合选择器 :not() 和 :nth-child() 来排除特定元素。

例如在这种情况下，我们要排除第 5 个和第 6 个元素，然后使用::not(:nth-child(5)) 和 :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>