html – 用于不在其他内容中的CSS选择器

我有一些像这样的嵌套元素：

<div class="foo">
    <div class="select-inside-this">
        <div class="not-inside-this">
            <div class="one select-this"></div>
        </div>
    </div>
</div>
<div class="select-inside-this">
    <div class="two select-this"></div>
</div>
<div class="three select-this"></div>

我想选择所有.select-这里面.select-inside-this但不包括那些包含在.not-inside-this中的那些.所以最后,我应该只能从上面的代码中选择两个.select-this.
CSS我试过但没有用：

.select-inside-this :not(.not-inside-this) .select-this {
    /* style here /*
}

要么：

.select-inside-this *:not(.not-inside-this) .select-this {
    /* style here /*
}

这里有解决方法吗？

我不想在这里使用JavaScript.我需要纯CSS3解决方案.

编辑：我不想使用直接子(>)选择器.正如我所问,我想在没有异常包装的情况下从任何级别选择所有这些元素.

解决方法

：不是(.not-inside-this)和*：not(.not-inside-this)与*是等价的;在前者的情况下,暗示了通用选择器.见 spec.

由于以下问题中给出的原因,目前无法构造匹配不是特定元素后代的元素的CSS选择器：

> CSS negation pseudo-class :not() for parent/ancestor elements
> Is the CSS :not() selector supposed to work with distant descendants?

选择器

.select-inside-this :not(.not-inside-this) .select-this

匹配.select-这个元素是某些元素的后代,而不是.not-inside-this,而后者又是.select-inside-this的后代.它不匹配.select-这个元素不是.not-inside-this的内容.select-inside-this.

这意味着,首先,您的选择器将错误地匹配以下内容：

<div class="select-inside-this">
    <div class="bar">
        <div class="not-inside-this">
            <div class="select-this"></div>
        </div>
    </div>
</div>

…因为.select-this,.bar的祖先之一是：not(.not-inside-this).

此外,这意味着至少有三个嵌套级别(尽管可能更多).在您的示例中,.two.select-this与其包含.select-inside-this之间没有其他元素,因此它永远不会匹配该元素.这就是为什么James Donnelly建议添加.select-inside-this> .select-这是对特定情况的考虑.

但是,仍然无法使用后代组合子编写单个复杂选择器来匹配没有特定祖先的元素.唯一的方法是使用尽可能多的重复子组合方法：not(.not-inside-this),但这要求您考虑所有可能的情况.如果你不能那样做,那么你对CSS选择器运气不好.