css - 来自 :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

Is it because n is simply an infinite list of numbers, including numbers before and after the number of targeted elements on the page?

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

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

If so, how can I declare "Everything but the last item" in a single declaration?

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