CSS获取没有课程的last-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)

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

.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