html - 当 CSS 中有 Y 个兄弟元素时，如何仅定位最后 N 个兄弟元素？

Question

当有Y个兄弟元素时，是否可以定位到最后N个兄弟元素？

例如，我有元素列表，如果且仅如果恰好有 8、11、14 等兄弟元素我希望最后两个看起来不同(所以 8 + 3n).

如果有任何其他数量的 child ，我希望他们看起来都一样。

Answer 1

到目前为止，最简单的方法是针对您想要设置样式的 2 个元素中的每一个元素使用其自己的一组伪类。

如您所述，最后一个 child 由 3n+8(8、11、14...)表示。那么倒数第二个 child 就是3n+7(7,10,13...)。

li:nth-last-child(1):nth-child(3n+8),
li:nth-last-child(2):nth-child(3n+7) {
  color: red;
}

ul { counter-reset: item; list-style-type: none; }
li { display: inline; padding: 0.25em; }
li::before { content: counter(item); counter-increment: item; }

<ul><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li><li><li><li></ul>

您还可以使用 Can CSS detect the number of children an element has? 中的技术，使用一个复杂的选择器来完成此操作，将 3n+8 替换为 :nth-last-child() 参数，并使用额外的 :nth-last-child(-n+2) 来定位具有一个伪类的最后两个元素:

li:first-child:nth-last-child(3n+8) ~ li:nth-last-child(-n+2) {
  color: red;
}

ul { counter-reset: item; list-style-type: none; }
li { display: inline; padding: 0.25em; }
li::before { content: counter(item); counter-increment: item; }

<ul><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li><li><li></ul>
<ul><li><li><li><li><li><li><li><li><li><li><li><li><li><li></ul>