我很难弄清楚为什么以下代码在Safari中显示为蓝色,而在Chrome和Firefox中显示为红色。
em:not(div) {
color: red
}
em:not(p div) {
color: blue
}
<p>
<em>FOO</em>
</p>
https://jsfiddle.net/hzcLpf9L/
显然,Chrome和Firefox不支持:not()
其中具有多个级别的CSS选择器。(可能的错误?)
我非常喜欢:not()
选择器,并且使用Safari开发,因此当我在Chrome上找到我的网站时,我几乎心脏病发作了。对于为什么会发生这种奇怪行为的任何解释,将不胜感激。
Safari最近发布了的4级版本:not()
,该版本允许使用复杂的参数选择器,使其与jQuery迄今为止的非标准实现相当。请参阅发行说明。在目前的化身:not()
只允许一个参数一个简单的选择,这样一个复杂的选择一样p div
不会在今天的浏览器的设计工作。
复杂选择器是由一个或多个复合选择器组成的表达式,这些选择器由组合符(如后代>
,~
和)分隔+
。复合选择器是一个或多个简单选择器的序列。div
是一个由一个简单选择p div
器组成的复合选择器,并且是一个由两个复合选择器组成的复杂选择器(每个复合选择器由一个简单选择器组成),由后代组合器分隔。
目前尚不知道何时将其引入其他浏览器,尽管目前不太可能:not()
更改的新规范-当前的4级定义不费吹灰之力,并且如果原始WebKit菌株足够大胆地实现它,那么进入其他菌株(包括Blink)实际上只是时间问题。
自FPWD进行了将近5年的苦苦等待之后,我们实际上可能很快就会真正看到选择器4的CR。考虑我抽。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句