如何使用nth-child()除了第五和第六之外的所有<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>

<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>