为什么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),

改为两个: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>

Answer 2

似乎您无法在:not()中列出清单。您必须做两行“ 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;
}