为什么 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：

列出多个选择器的功能是实验性的，尚未得到广泛支持。

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

换行：

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

改为两个:nots：

#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>

Answer 2

您似乎无法在:not() 中创建列表。你必须做两个“不”行。

CSS

#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), // edit
#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;
}