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>

and my 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 。

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

你能告诉我为什么吗?

Answer 1

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

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

因此，它应该以选择器作为前缀。

如果你把css改成:

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

这将选择所有div，除了类为'.mapDiv1'的div

如果你把代码改成:

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

这将选择父div中的所有div，除了那些类为'. mapdiv1 '的父div。

Answer 2

你必须改变你的代码

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

我把你的提琴更新为提琴

Answer 3

演示

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

更多信息请阅读

Answer 4

try this

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