html - 选择器查找元素的第一个匹配级别

Question

具有以下结构:

<ul>
    <li>
        <div><span class="node">Content1</span></div>
    </li>
    <li>
        <div><span class="node">Content2</span></div>
    </li>
    <!-- but also: -->
    <li>
        <div><span class="node">Content3</span>
            <ul>
                <li>
                    <div><span class="node">Content on 2nd level</span></div>
                </li>
            </ul>
        </div>
    </li>
</ul>

现在我想选择位于层次结构的第一级别的具有CSS类node的所有span元素。如何在不匹配第 2 级最后一个跨度的情况下做到这一点？

编辑: div 标记仅用于演示目的。它们可以更改为跨度，甚至可以嵌套在另一个 div 中。我不想从中得到一个脆弱的 CSS 选择器(网络测试)，所以我不想使用直接子选择器。此外，我无法自己更改 HTML 代码。

Answer 1

您可以使用>选择器:

#parent > ul > li  .node

或者，如果您没有家长 ID:

ul > li :not(ul) .node