html - 为什么 chrome 和 firefox 忽略这个多选择器 CSS 规则？

Question

无论出于何种原因，Chrome 和 Firefox 似乎都忽略了这条 CSS 规则。我没有看到它们在任何地方被应用到开发工具中，我很困惑。我注意到 Safari 正在应用它们，但 Chrome 和 Firefox 没有。

#et-boc .et-l .hentry,
#et-boc .et-l a,
#et-boc .et-l a:active,
#et-boc .et-l blockquote,
#et-boc .et-l div:not(.woocommerce-message, .star-rating),
#et-boc .et-l em,
#et-boc .et-l form,
#et-boc .et-l h1,
#et-boc .et-l h2,
#et-boc .et-l h3,
#et-boc .et-l h4,
#et-boc .et-l h5,
#et-boc .et-l h6,
#et-boc .et-l hr,
#et-boc .et-l iframe,
#et-boc .et-l img,
#et-boc .et-l input,
#et-boc .et-l label,
#et-boc .et-l li,
#et-boc .et-l object,
#et-boc .et-l ol,
#et-boc .et-l p,
#et-boc .et-l span,
#et-boc .et-l strong,
#et-boc .et-l textarea,
#et-boc .et-l ul,
#et-boc .et-l video {
  text-align: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: 0;
  vertical-align: baseline;
  background: 0 0;
  letter-spacing: normal;
  color: inherit;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  text-shadow: inherit;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

<div id="et-boc">
  <div class="et-l">
    <p>Foobar</p>
  </div>
</div>

正如您在 CSS 中看到的那样，#et-boc .et-l p 规则应该命中段落标记，但实际上没有。

我注意到，如果我将它作为一个单独的 CSS 规则输入，而不是将它与所有其他规则组合在一起，它就会起作用。 Chrome/Firefox 是否对您可以添加到单个规则中的选择器数量施加某种限制？

如果您想知道，这是从 WordPress 插件 Divi Builder 自动输出的。

Answer 1

参见 MDN's article在 :not:

上

The ability to list more than one selector is experimental and not yet widely supported.

看起来只有 Safari 9+ 支持它(其他浏览器不支持)。一旦非 Safari 浏览器看到这条规则，他们就会窒息。

改变行:

#et-boc .et-l div:not(.woocommerce-message, .star-rating),

改为两个:not:

#et-boc .et-l div:not(.woocommerce-message):not(.star-rating),

这样它们只包含一个简单的选择器。

#et-boc .et-l .hentry,
#et-boc .et-l a,
#et-boc .et-l a:active,
#et-boc .et-l blockquote,
#et-boc .et-l div:not(.woocommerce-message):not(.star-rating),
#et-boc .et-l em,
#et-boc .et-l form,
#et-boc .et-l h1,
#et-boc .et-l h2,
#et-boc .et-l h3,
#et-boc .et-l h4,
#et-boc .et-l h5,
#et-boc .et-l h6,
#et-boc .et-l hr,
#et-boc .et-l iframe,
#et-boc .et-l img,
#et-boc .et-l input,
#et-boc .et-l label,
#et-boc .et-l li,
#et-boc .et-l object,
#et-boc .et-l ol,
#et-boc .et-l p,
#et-boc .et-l span,
#et-boc .et-l strong,
#et-boc .et-l textarea,
#et-boc .et-l ul,
#et-boc .et-l video {
  text-align: inherit;
  margin: 0;
  padding: 0;
  border: none;
  outline: 0;
  vertical-align: baseline;
  background: 0 0;
  letter-spacing: normal;
  color: inherit;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  text-shadow: inherit;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
  background-color: yellow;
}

<div id="et-boc">
  <div class="et-l">
    <p>Foobar</p>
  </div>
</div>