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)

在所有情况下，以下将给我最后一个孩子，但我希望最后一个孩子不是仅限移动的孩子。

.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都会问只有一个问题：我是我父元素的最后一个孩子吗？

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

对于4级选择器，您甚至没有计划指定类或其他限制属性。见

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

CSS获取没有课程的最后一个孩子

目标

HTML

1 个答案: