仅包含递归结构中的顶级匹配项的 CSS 选择器答案

【问题标题】：CSS selector that includes only top matches in a recursive structure仅包含递归结构中的顶级匹配项的 CSS 选择器
【发布时间】：2020-10-17 07:51:02
【问题描述】：

我有一个“自相似”（或递归）HTML 结构，我需要在其中构建一个 CSS 选择器，该选择器仅捕获此结构中的 top 匹配项。例如，给定以下 HTML：

<div class="option-block">
    <div class="option">
        <p>main content</p>
    </div>
    <div class="detail">
        <div class="option-block">
            <div class="option">
                <p>child content</p>
            </div>
            <div class="detail">
                <p>child detail</p>
            </div>
        </div>
    </div>
</div>

我需要一个 CSS 选择器，它为我提供顶部 option-block 中的第一个 div，IOW，包含文本 main content 的 div。

我尝试过使用 .option-block > div:first-child（以及类似的几个变体），但这也给了我带有文本“子内容”的 div。

需要注意的一点是，这个特定的结构可以在 HTML 文档中的任何位置，所以我没有事先参考用作锚点（就像他们做的 here 或 here）。

要注意的另一件事是，这种结构可以自我复制到更多级别：.option-block 容器的.detail 组件内部总是可以有另一个.option-block 容器，所以我不能依赖计数或类似的东西那个。

更新：感谢到目前为止的回答。我应该提到的是，选择器将以编程方式用于定位项目，而不是应用样式。此外，选择器将从现有项目的上下文中应用，该项目可能已经在 this 层次结构中。

【问题讨论】：

标签： html css

【解决方案1】：

我假设您不能只更改您的 HTML 结构（否则只需在第一级添加一个额外的类，或者包装整个东西并检查直接祖先）。

您可以检查.option-block 的祖先。如果您相当确定在您的块之外不会有其他 .option-block > .detail 结构，则此方法有效。

:not(.option-block) > :not(.detail) > .option-block > div:first-child {
  background: red;
}

<div class="option-block">
    <div class="option">
        <p>main content</p>
    </div>
    <div class="detail">
        <div class="option-block">
            <div class="option">
                <p>child content</p>
            </div>
            <div class="detail">
                <p>child detail</p>
            </div>
        </div>
    </div>
</div>

【讨论】：

【解决方案2】：

我相信 :first-child 和 :last-child 选择器不支持递归函数 (check here)

一个可能的解决方案可能是给“主要内容”div.option 另一个类以具有唯一的选择器。否则，您可以在 .detail div 内的 .option-block div 中设置一个类并使用 :not 选择器：

.option-block:not(.inner-option) .option{ ... }

【讨论】：

【解决方案3】：

据我所知，似乎没有办法使用 CSS 选择器来满足我的需求。然而，经过一些额外的研究，XPath 似乎可以工作，如下所示：

(.//div[@class=“option-block”])[1]/div

【讨论】：