css选择器选择第一个孩子，然后排除祖儿？

Question

仅使用CSS，是否可以采用以下HTML：

<div class="main">
    <div class="level1">
        <div class="level2">
            <div class="select-me">should be blue</div>
            <div class="level3">
                <div class="select-me">NOT BLUE</div>
            </div>
        </div>
    </div>
    <div class="select-me">NOT BLUE</div>
</div>

并且只选择类select-me的第一个元素？使用:first-child，.select-me下的.level3元素也会被选中（因为从技术上讲，它也是第一个孩子）。我希望它选择一个，然后停止。

您可以通过JSFiddle了解我正在谈论的内容。

我正在寻找一个CSS选择器（如果存在），只能正确地突出显示找到的第一个.select-me元素。此选择器也不能使用任何level*类，因为它们将始终是动态的。

这可能吗？

Answer 1

不确定是否可以使用单个选择器执行此操作，但将此添加到jsfiddle应恢复您不希望匹配的元素的默认样式：

.select-me ~ * .select-me:first-child {
    color: black;
    background-color: transparent;
}