css - not() 不影响后代 DIV

Question

我有一个非常奇怪的“not()”css 选择器行为。

这里是我的简化代码:

<div id="mapDiv" class="mapDiv mapDiv1">
    pippo
    <div class="gm-style">pluto</div>
</div>

<div id="mapDiv2" class="mapDiv mapDiv2">
    pippo
    <div class="gm-style">pluto</div>
</div>

和我的CSS:

.mapDiv1,.mapDiv2
{
    width:300px;
    height:100px;
    border:solid 1px red;
}

.mapDiv div
{
    width:200px;
    height:50px;
    border:solid 1px blue;
}

:not(.mapDiv1) div
{
    color:green;
}

提供了一个 jsFiddle here .

我认为 color:green 将仅应用于第二个框文本，由于 not() 选择器....而不是应用于两者。

你能解释一下为什么吗？

Answer 1

按照我的理解，:not() 是一个否定伪类。

这意味着，首先你选择一堆元素，然后使用否定伪类从选定的一堆元素中删除元素。

因此它应该有一个选择器作为前缀。

如果您将 css 更改为:

div:not(.mapDiv1)
{
 color:green;
}

这将选择除类为“.mapDiv1”的 div 之外的所有 div

如果您将代码更改为:

div:not(.mapDiv1) div
{
color:green;
}

这将选择父 div 中的所有 div，除了类为“.mapDiv1”的那些父 div。

More Reference Here