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

参见 :not 上的 MDN's article：

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>

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;
}

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

Why is chrome and firefox ignoring this multiple selector CSS rule?

html

css

cross-browser

css-selectors