当一部分未知时,为什么CSS逗号分隔选择器会破坏整个规则？

Question

解释问题:

所以,如果你有一个CSS规则看起来像这样:

h1, h1 a:hover {
  color: blue;
}

它的工作正常,从可用性的角度来看,这个例子可能是最好的,但它确实有效.(它可以证明这个问题...)

但是,如果您使用浏览器无法理解的逗号(,)分隔,则会忽略漏洞规则.

 h1, h1 a:hover, h1:focus-within {
    color: blue;
 }

浏览器不理解:focus-within伪类将忽略整个规则.这意味着即使是h1也不会得到指定的规则.

别误会我的意思.忽略他们不知道的东西是CSS中非常强大的功能!

但是为什么不是以一种只忽略未知部分并且所有其他选择器仍然按预期工作的方式设计的呢？

就个人而言,我很少偶然发现这个问题,而且我已经接受了这样一个事实:选择器中的一个错误的东西打破了整个规则.但很难解释为什么一个错误的声明或属性只导致特定的行被忽略,而选择器中未知的任何东西都会破坏整个块.

感觉我错过了什么,所以如果有一个很好的解释让我知道并感谢你这样做.

当然,解决方法是将选择器的"危险"部分分成新规则,如下所示:

h1, h1 a:hover {
    color: blue;
}
h1:focus-within {
    color: blue;
}

但那感觉很糟糕.(由于"不必要的"重复)

只是想把它放在这里.

Answer 1

事实证明，这实际上是有意为之，并在选择器级别 3中定义（由我强调）：

如果这些选择器中只有一个无效，则整组选择器都将无效。这将使所有三个标题元素的规则无效，而在前一种情况下，三个单独的标题规则中只有一个会无效。

无效的 CSS 示例：

h1 { font-family: sans-serif }
h2..foo { font-family: sans-serif }
h3 { font-family: sans-serif }

不等于：

h1, h2..foo, h3 { font-family: sans-serif }

因为上面的选择器 (h1, h2..foo, h3) 完全无效，整个样式规则被删除。（当选择器未分组时，仅删除 h2..foo 的规则。）

CSS 2 没有指定当一个选择器错误时该怎么做。事实上，W3C 规范规定压缩形式相当于书面版本：

在此示例中，我们将具有相同声明的三个规则压缩为一个。因此，

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

相当于：

h1, h2, h3 { font-family: sans-serif }

编辑：（谢谢@BoltClock）：

CSS 2.1 确实指定了行为，并且与 CSS3 相同：

(...) 由于“&”在 CSS 2.1 选择器中不是有效标记，因此 CSS 2.1 用户代理必须忽略整个第二行。