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类span的所有node元素，这些元素位于层次结构的 first 级别。如何在不匹配第2级的最后一个跨度的情况下做到这一点？

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

Answer 1

您需要从顶级ul的父级开始，然后使用子选择器向下工作。例如，假设父元素由#parent标识：

#parent > ul > li > div > span.node

如果li和span.node之间的元素层次结构不固定，那么事情会变得复杂一些。为了避免匹配内部span.node元素，将需要对标记做出一些假设，因为像下面这样的简单后代选择器将始终返回每个span.node每个嵌套列表都作为顶级li元素的后代出现：

#parent > ul > li span.node

Answer 2

您可以使用>选择器：

#parent > ul > li  .node

或者，如果您没有父ID：

ul > li :not(ul) .node

Answer 3

修复/修改你的HTML代码，简单就是更好。

Working fiddle

<div><span class="node test">Content2</span></div>

为您的范围添加2个班级名称

.node.test {
    color: red;
}

指向正确的范围

选择器找到第一个匹配级别的元素

3 个答案: