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 个元素，然后使用 this::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;
}

小提琴更新。