如何使用nth-child（）</li>为除第五和第六之外的所有<li>设置样式

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>

除了5 + 6

之外，我想给所有<li>一个红色

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>

Answer 2

最简单的方法是：

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

fiddle已更新。