来自 :nth-of-type(n+1) 的意外行为

Question

我是 x-of-type 系列 CSS 伪类的狂热用户：

• :first-of-type
• :last-of-type
• :nth-of-type
• :nth-last-of-type

我通常非常擅长确保任何一系列相似元素（列表项等）完全按照我的意愿显示。

然而，在过去的一个小时里，我一直被困在如何通过单个样式声明实现以下结果：

• 项目 1 有一个border-bottom
• 项目 2 有一个border-bottom
• 项目 3 有一个border-bottom
• 第 4 项（最后一项）没有 border-bottom

我已经达到了我所需要的，使用：

.item {
border-bottom:6px solid rgb(227,227,227);
}

.item:last-of-type {
border-bottom:none;
}

但为了简洁起见，我仍然希望通过一个声明来实现相同的结果。

问题：

为什么不

.item:nth-of-type(n-1) {
    border-bottom:6px solid rgb(227,227,227);
    }

或

.item:nth-last-of-type(n+1) {
    border-bottom:6px solid rgb(227,227,227);
    }

工作？

是不是因为n 只是一个无限的数字列表，包括页面上目标元素数量之前和之后的数字？

如果是这样，我如何在一个声明中声明“除了最后一项之外的所有内容”？

（提前道歉，如果它真的很明显而我没有注意到它......）

---

已添加...

这是我正在使用的 HTML：

<aside>
<img src="" title="" alt="" />
<span class="something-else">Blah</span>
<span class="item">Item Details</span>

<img src="" title="" alt="" />
<span class="something-else">Blah</span>
<span class="item">Item Details</span>

<img src="" title="" alt="" />
<span class="something-else">Blah</span>
<span class="item">Item Details</span>

<img src="" title="" alt="" />
<span class="something-else">Blah</span>
<span class="item">Item Details</span>
</aside>

Answer 1

是否因为n 只是一个无限的数字列表，包括页面上目标元素数量之前和之后的数字？

是的，这就是为什么:nth-of-type(n-1) 似乎匹配每个元素：n 计数无限次。因此，当n 为 1 加上该元素类型的子元素总数时，最后一个类型仍然匹配。换句话说，任何b 的表达式n-b（或b <= 1 的n+b）等价于n（本身为n-0），这是一个保证匹配。

:nth-last-of-type(n+1) 很接近，但是没有做你想做的事情的原因是因为n 从零开始计数，所以当n 为零时，n+1 匹配最后一个类型。

如果是这样，我如何在一个声明中声明“除了最后一项之外的所有内容”？

你有两种方法。您接近的一个是:nth-last-of-type(n+2)。另一个是更清晰的:not(:last-of-type)。

Answer 2

试试这个选择器：

.item:not(:last-of-type) {
    border-bottom:6px solid rgb(227,227,227);
}

它选择所有具有item 类的元素，即:not :last-of-type。

请注意，您可以将:not() 与任何单个选择器一起使用。

/* This is valid */
p:not(.classA):not(.classB):not(.classC) {
    /* ... */
}

/* This isn’t: */
p:not(.classA.classB.classC) {
    /* ... */
}