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>

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

你可以看到我用这个JSFiddle在说什么。

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

这可能吗？

Answer 1

不确定是否可以使用单个选择器来完成此操作，但将其添加到jsfiddle中应该可以恢复不想匹配的元素的默认样式：

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