CSS 获取没有类的最后一个 child

Question

这对你们来说是一个棘手的挑战，CSS 选择器获取没有类的 :last-child。

到目前为止我尝试了什么:

.nav-item:not(.nav-item--mobile):last-child {...}
.nav-item:last-child:not(.nav-item--mobile) {...}

我有类似的查询选择器可以做一些有趣的事情，所以我宁愿尝试通过 CSS 来做这件事。移动元素的数量可以变化。

// Get the first child in the list when there are n or more, and
// they are not mobile. Yes, this actually works.
.nav-item:first-child:nth-last-child(n+7):not(.nav-item--mobile)

在所有情况下，以下内容都会给我最后一个 child ，但我想要最后一个不是移动独生子女的 child 。

.navigation-item--top:last-child

目标

generic generic generic generic generic mobile mobile
                                   ^
                             target this one

HTML

<ul class="nav-items-list">
    <li class="nav-item"></li>
    <li class="nav-item"></li>
    <li class="nav-item"></li>
    <li class="nav-item"></li>
    <li class="nav-item nav-item--mobile"></li>
    <li class="nav-item nav-item--mobile"></li>
</ul>

是的，我可以在生成的导航中找出哪个是正确的，或者我可以用 JS 找到它。

Answer 1

不幸的是，仅使用 CSS 无法实现您想要的。

:last-child 询问只有一个问题，无论您指定什么其他内容:我是我父元素的最后一个 child 吗？

遗憾的是，没有:last-of-class，只有:last-of-type，但这只关心元素类型。

甚至没有计划在第 4 级选择器中指定一个类或其他限制属性。见

https://www.w3.org/TR/selectors4/#the-last-child-pseudo