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。

我认为颜色：绿色只会应用于第二个框文本，因为not（）选择器....而是应用于两者。

你能解释一下为什么吗？

Answer 1

您必须将代码更改为

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

我将您的小提琴更新为Fiddle

Answer 2

试试这个

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

Answer 3

根据我的理解，：not（）是一个否定伪类。

这意味着，首先选择一堆元素，然后使用negation伪类从所选束中删除元素。

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

如果您将css更改为：

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

这将选择除了具有类＆＃39; .mapDiv1＆＃39;

的div之外的所有div

如果您将代码更改为：

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

这将选择父div中的所有div除了具有类＆＃39; .mapDiv1＆＃39;的那些父div。

More Reference Here

Answer 4

的 Demo

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

有关详情read

not（）不影响后代DIV

4 个答案: