选择除了类的子项之外的所有元素

Raj*_*pta 3 css css-selectors

如何选择<div>除了具有某些类的元素内的div之外的所有元素?

尝试:

 div :not(.test div)
 div:not(.test div) 
Run Code Online (Sandbox Code Playgroud)

但不起作用!


编辑:

这是请求的HTML.

<div>
</div>

<span class="test">
 <div/>
</span>
Run Code Online (Sandbox Code Playgroud)

Jak*_*lek 5

div之后没有空格,所以它:not与它相关,那么第二个div就是一个孩子,所以不是它的一部分:not

div:not(.test) div {
    /* style */
}
Run Code Online (Sandbox Code Playgroud)

对于

<div class="test">
    <div></div>
</div>
<div>
    <div></div> <!-- gets selected -->
</div>
Run Code Online (Sandbox Code Playgroud)

编辑:当您添加标记时,将使用正确的版本

div :not(.test) div {
    /* style */
}
Run Code Online (Sandbox Code Playgroud)

对于

<div>
    <span class="test">
        <div></div>
    </span>
    <span>
        <div></div> <!-- gets selected -->
    </span>
</div>
Run Code Online (Sandbox Code Playgroud)

要么

span:not(.test) div {
    /* style */
}
Run Code Online (Sandbox Code Playgroud)

对于

<span class="test">
    <div></div>
</span>
<span>
    <div></div> <!-- gets selected -->
</span>
Run Code Online (Sandbox Code Playgroud)

因为您没有span在原始问题中提及,也没有指定跨度本身是否在div内.


>在这种情况下,您还应该考虑在选择器中使用它来缩小范围.