Html CSS:not on the parent不适用于子选择器，但适用于子选择器，除非您明确指定父元素类型

小提琴：

HTML:

对于c1，我有一个不包括父元素类型的后代规则。对于c2，我有一个包含父元素类型的后代规则。对于c3，我有一个不包括父元素类型的直接子规则。只有c2和c3按预期工作。为什么？

：不（#外部）。c1

表示：选择类为

c1

的所有元素，这些元素是没有ID的元素的后代

这与您的第一个元素相匹配，因为它具有类

c1

，并且是

主体

的后代，主体没有ID

外部

相反，

div:not（#outer）。c1

表示：选择类为

c1

的所有元素，这些元素是没有ID的

div

元素的后代。这与第二个元素不匹配，因为它的所有祖先要么不是

div

元素，要么具有ID

outer

最后，

：not（#outer）>.c1

表示：选择类为

c1

的所有元素，这些元素是没有ID

outer

的元素的子元素。这与第三个元素不匹配，因为其父元素具有ID

outer

：not（#outer）。c1表示：选择类为

c1

的所有元素，这些元素是没有ID

outer

的元素的后代

这与您的第一个元素相匹配，因为它具有类

c1

，并且是

主体

的后代，主体没有ID

外部

相反，

div:not（#outer）。c1

表示：选择类为

c1

的所有元素，这些元素是没有ID的

div

元素的后代。这与第二个元素不匹配，因为它的所有祖先要么不是

div

元素，要么具有ID

outer

最后，

：not（#outer）>.c1

表示：选择类为

c1

的所有元素，这些元素是没有ID

outer

的元素的子元素。这与第三个元素不匹配，因为其父元素具有ID

outer

可能重复：可能重复：

<div id="outer">
    <div class="c1">
        c1 should be black
    </div>
    <div class="c2">
        c2 should be black
    </div>
    <div class="c3">
        c3 should be black
    </div>
</div>
<div id="somethingelse">
    <div class="c1">
       c1 should be red
    </div>
    <div class="c2">
        c2 should be red
    </div>
    <div class="c3">
        c3 should be red
    </div>
</div>

:not(#outer) .c1 {
    color: #ff0000;
}

div:not(#outer) .c2 {
    color: #ff0000;
}

:not(#outer) > .c3 {
    color: #ff0000;
}