9

解释问题：

所以如果你有一个看起来像这样的 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;
}

但这感觉很糟糕。（由于“不必要的”重复）

只是想把它放在这里。

4

1 回答 1

4

事实证明，这实际上是故意的，并在Selectors Level 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) 完全无效，整个样式规则都被删除了。(When the selectors are not grouped, only the rule for h2..foo is dropped.)

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 用户代理必须忽略整个第二行。

于 2016-12-20T16:23:58.307 回答