是否可以仅使用 CSS 选择元素的绝对最后一个孙子？ [复制]

Posted 2023-03-06

【中文标题】是否可以仅使用 CSS 选择元素的绝对最后一个孙子？ [复制]

【英文标题】：Is it possible to select the absolute last grand child of an element using only CSS? [duplicate]

【发布时间】：2020-02-21 07:56:55

【问题描述】：

<div class="a">
  <div class="b">
    <div class="c"></div>
    <div class="c"></div>
    <div class="c"></div>
  </div>
  <div class="b">
    <div class="c"></div>
    <div class="c"></div> <!-- element to select -->
  </div>
  <div class="b">

  </div>
</div>

在这种情况下使用 .a .b:last-child .c:last-child 将不起作用，因为最后一个 div.b 是空的。

【问题讨论】：

在你问这类问题之前，你真的应该做一些研究。您是否难以找到答案或阅读选择器文档？

不确定是否了解所有这些可能的重复。它们是如何相关的？不，你不能使用 CSS 来做到这一点，你需要 JS/jQuery --> $('.c:last') 会做到这一点

这不是重复的。

@antoni 关于如何定位特定元素，基本上可以提出无限的问题，它们都将归结为相同的答案；他们所追求的灵活性在当前的 CSS 规范中是不可能的。

【参考方案1】：

不，不可能有一个选择器查看下一个兄弟（查看是否为空）并在 DOM 的前一个元素中使用它。

:empty 伪类可以帮助您了解元素是否为空，但对您的情况无济于事。

Chrome、Firefox、Safari、Opera 9.5+、Internet Explorer 9+ 以及 android 和 ios 支持:empty。

另请注意，包含空格的元素不被视为空。

另一个不为人知但非常有用的选择器是~：这意味着任何出现在特定DOM元素之后的兄弟。就像 + 一样，除了 ~ 还针对 .b + .b，如果中间有另一个不是 .b 的 dom 元素，例如 br。

我创建了一个 Codepen 来探索方便的选择器，即使响应是“不，你做不到”：https://codepen.io/antoniandre/pen/jOOmKmq

【讨论】：

好吧..我不确定您是否应该在这里肯定地说不..工作草案中有逻辑和关系伪类选择器。 .a .b:nth-last-child(has( > .c)) .c:last-child 应该在这方面起作用.. 或者它的一些变体drafts.csswg.org/selectors-4/#relational

这还是不行，你不能往前看并在之前的元素选择器中使用它，至少现在不能：)