为什么CSS：不是伪类不能按预期工作？

考虑下面的HTML：为什么CSS：不是伪类不能按预期工作？

<div class="a"> 
    <div class="b">Hello</div> 
    </div> 
    <div class="c"> 
    <div class="b">World</div> 
</div>

添加红色下面的CSS颜色只有 “世界”，符合市场预期：

.c .b { 
    color: red; 
}

但是，把下面的CSS代替colors both "Hello" and "World" in red：

:not(.a) .b { 
    color: red; 
}

为什么？

来源

2013-05-07 Misha Moroshko

使用' ：not（）'排除父元素是不可靠的 - 参见http://stackoverflow.com/questions/7084112/css-negation-pseudo-class-not-for-parent-ancestor-elements/7084147#7084147 – BoltClock 2013-05-07 19:59:32

你需要给它这样的： -

Demo

div:not(.a) .b { 
    color: red; 
}

Pseudo-class :not

语法是选择：不是（）{性质}

来源

2013-05-07 03:23:37 PSL

语法实际上并不要求'：not（）'被任何东西限定，但无论如何这是很好的做法。 – BoltClock 2013-05-07 19:56:50

非常感谢@BoltClock，但是查看文档中的语法和示例，并尝试不使用'：not（.a）.b'，但它并没有在Chrome中进行适当的选择。我也用这种方式自己..也许我错过了东西..：| – PSL 2013-05-07 20:13:26

是的，我基本上说的是，它没有“选择器”部分的作品，但像你提到它不符合你的期望。另请参阅我对该问题的评论链接。 – BoltClock 2013-05-07 20:17:39

由于:not伪类repr esents不是由它的参数表示的元素，你有指定要排除的元素以前的:not选择

按照您的例子，试试这个：

div:not(.a) .b { 
    color: red; 
}

来源

2013-05-07 03:25:55

不......参数是括号内的内容 - 在这种情况下，它是'.a'，而不是'div'，这是您想限制选择器的内容。另请参阅我对PSL答案的评论。 – BoltClock 2013-05-07 19:57:31

为什么CSS：不是伪类不能按预期工作？

回答

相关问题