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解决方案.

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

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元素不匹配..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,所以它永远不会匹配该元素.这就是为什么詹姆斯唐纳利建议增加.select-inside-this > .select-this对特定案件的解释.

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

Answer 2

您可以使用Child Combinator Selector>来指定直接子代：

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

这将选择.select-this不是任何元素的后代的任何.not-inside-this元素，并且还选择作为.select-this元素的直接子.select-inside-this元素的元素。

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>

Answer 3

聚会有点晚了，它可能与您的用例不符，但这就是我最终要做的：

HTML：

<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>

CSS：

.select-inside-this .select-this {
    background: blue;
}
.select-inside-this .not-inside-this .select-this {
    background: none;
}

诀窍是积极选择负面元素并撤消样式。

它至少适用于简单的用例。

Answer 4

这是一个老问题，但我遇到了类似的问题，现在可以通过以下方法解决它：

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

https://www.stefanjudis.com/snippets/how-to-select-elements-that-are-not-children-of-other-elements-in-css/