使用 CSS 在树中选择父 n 层？

Question

我有一个具有相对复杂的 DOM 结构的应用程序，有 20 多个 div 层。

如果我在树中间某处有一个带有

class="active"

的 div，我如何使用 CSS 选择它的父级 n 在树中分层？

例如，如何选择下面树中大写标记的div（向上4层）？ :

<DIV>
  <div>
    <div>
      <div>
        <div class="active">
        </div>
      </div>
      <div>
      </div>
    </div>
  </div>
</DIV>

同样考虑第一个孩子？如何选择树中的第一个子n层？

Answer 1

不幸的是，没有父选择器这样的东西。您必须直接在所需元素上设置一个类，可以手动设置，也可以使用一些服务器端代码，或者通过 JavaScript。

Answer 2

根据这篇文章，我发现标题为 CSS4 Preview，可以在 CSS4 中设置父元素的样式。该文章表明可以像下面这样设置父元素的样式：

$div > div > div > div.active { border: 1px solid #ccc; }

（给定的示例将在与

div

相关的树中设置

div.active

嵌套 3 层的样式）

回到我的应用程序，使用 PHP 和内联 CSS，我将能够控制 n（嵌套深度）。

在 CSS4 之前，我将使用某种 jQuery 解决方案。

Answer 3

最新的浏览器版本最近开始支持“:has()”CSS 选择器（请参阅浏览器支持）。

所以，在你的情况下，CSS 将是：

div:has(div > div > div > div.active){
  border: 1px solid #ccc;
}

<DIV>
Some content
  <div>
    <div>
      <div>
        <div class="active">
        </div>
      </div>
      <div>
      </div>
    </div>
  </div>
</DIV>