时间戳

首页 > 解决方案 > 是否可以仅使用 CSS 选择元素的绝对最后一个孙子？

css - 是否可以仅使用 CSS 选择元素的绝对最后一个孙子？

问题描述

<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一个是空的。

标签： csscss-selectors

解决方案

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

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

:empty在 Chrome、Firefox、Safari、Opera 9.5+、Internet Explorer 9+ 以及 Android 和 iOS 上受支持。

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

另一个不为人知但非常有用的选择器是~: 这意味着任何出现在特定 DOM 元素之后的兄弟。like a+除了如果在其间有另一个不是 a like a的 dom 元素，它~也以 a 为目标。.b + .b.bbr

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

推荐阅读