不在其他东西里面的东西的 CSS 选择器

Question

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

 <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-this 里面的 .select-inside-this 但不是包裹在 .not-inside-this 中的那些。所以最后，我应该只能从上面的代码中选择 two.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 解决方案。

编辑：我不想使用直接子（ > ）选择器。正如我所问，我想从任何级别选择所有这些元素，而无需异常包装器。

原文由 Sohan Zaman 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

:not(.not-inside-this) 和 *:not(.not-inside-this) 与 * 是等价的；在前者的情况下，隐含了通用选择器。请参阅 规范。

由于以下问题给出的原因，目前无法构建匹配非特定元素 后代 元素的 CSS 选择器：

• 父/祖先元素的 CSS 否定伪类 :not()
• CSS :not() 选择器是否应该与远距离后代一起使用？

选择器

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

匹配 .select-this 不是 .not-inside-this 的某些元素 的 后代元素，后者又是 .select-inside-this 的后代它 不 匹配 .select-this 不是 --- 在 .select-inside-this .not-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-this 以说明该特定情况的原因。

然而，仍然不可能使用后代组合器来编写一个复杂的选择器来匹配没有特定祖先的元素。 唯一 的方法是根据需要使用尽可能多的 :not(.not-inside-this) 重复子组合器方法，但这需要您考虑所有可能的情况。如果你 _做不到_，那么你就没有 CSS 选择器了。

原文由 BoltClock 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 子组合器选择器 > 指定直接子项：

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

This selects any .select-this element which is not a descendent of any .not-inside-this element and also .select-this elements which are direct children of .select-inside-this elements .

 body > .select-inside-this :not(.not-inside-this) .select-this,
body > .select-inside-this > .select-this {
  color: red;
}

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

原文由 James Donnelly 发布，翻译遵循 CC BY-SA 3.0 许可协议