CSS3:不是完全支持Firefox的否定伪类吗?

Cam*_*oft 6 css css-selectors css3

我正在尝试使用规范中定义的CSS3:not伪类.根据规格:

否定伪类,不是(X),是一个函数符号,它将一个简单的选择器(不包括否定伪类本身)作为参数.它表示一个未由其参数表示的元素

所以我希望能够做到这样的事情:

p:not(.class1, .class2)
Run Code Online (Sandbox Code Playgroud)

但它似乎不适用于Safari或Firefox,它们应该完全支持这个选择器.

当参数是单个选择器时它确实有效,例如:

这是一个显示问题的示例:jsFiddle示例

p:not(.class1)
Run Code Online (Sandbox Code Playgroud)

根据这篇博文,该作者建议您应该能够指定多个选择器作为参数.

此外,根据CSS3 SitePoint参考,Firefox,Safari和Chrome完全支持:not selector.

我是否误解了规范,或者浏览器实际上只对这个选择器有部分支持?

RoT*_*oRa 10

在CSS中,逗号(,)分隔选择器.它不是选择器本身,因此不能在选择器内使用.因此,取决于您是否要应用规则

  • 非段落.class1和段落不是.class2,
  • 段落既没有.class1,也没有class2
  • 没有和的段落.class1 .class2

它的

p:not(.class1), p:not(.class2) {
}
Run Code Online (Sandbox Code Playgroud)

要么

p:not(.class1):not(.class2) {
}
Run Code Online (Sandbox Code Playgroud)

要么

p:not(.class1.class2) {
}
Run Code Online (Sandbox Code Playgroud)

顺便说一句,恕我直言,最好避免:not在可能的情况下,例如,有一个适用于所有ps 的一般规则(具有你想在:not规则中设置的属性)和一个适用于具有类的那个并覆盖必要时第一条规则的属性.