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

事实证明这实际上是故意的并且在Selectors Level 3中定义（我强调）：

警告：此示例中的等效性为真，因为所有   选择器是有效的选择器。如果只有其中一个选择器   无效，整个选择器组无效。这个会   使所有三个标题元素的规则无效，而在   前一种情况只有三个单独的标题规则中的一个   无效。

无效的CSS示例：

[Serializable]
public class RootDialog : IDialog<object>
{
    private readonly IAnalyticsService _analyticsService;

    public RootDialog(IAnalyticsService analyticsService)
    {
        SetField.NotNull(out _analyticsService, nameof(analyticsService), analyticsService);
    }

}

不等同于：

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

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

当一个选择器出错时，CSS 2没有指定要做什么。事实上，W3C spec表明压缩形式等同于书面出版的版本：

在这个例子中，我们使用相同的声明来压缩三个规则合而为一。因此，

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

等同于：

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

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

解释问题：

进一步想知道为什么会这样：

不满意的解决方案：

1 个答案: