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

Question

我是CSS伪类x-of-type家族的狂热用户:

: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只是一个无限的数字列表，包括页面上目标元素数量前后的数字？

如果是这样，我如何在单个声明中声明 "Everything but the last item"？

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

已添加...

这是我正在使用的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

试试这个 select 或：

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

它select所有带有classitem的元素，即:not:last-of-type.

请注意，您可以将 :not() 与任何单个片段一起使用 selector.

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

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

Answer 2

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 加上该元素类型的子元素总数时，最后一个类型仍将匹配。换句话说，任何 b 的表达式 n-b（或 b <= 1 的 n+b）等同于 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).

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

Unexpected behaviour from :nth-of-type(n+1)

css

css-selectors

pseudo-class

已添加...