提问人：user3163495 提问时间：11/18/2023 最后编辑：user3163495 更新时间：11/18/2023 访问量：67
错误？嵌套的 CSS 供应商前缀会破坏 Chrome CSS 解析
Bug? Nested CSS vendor prefix breaks Chrome CSS parsing
问：
CSS 嵌套是一个相对较新的功能，现在所有主流浏览器都原生支持它。有关 CSS 嵌套的更多信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting。
在以下示例中，“此按钮应为红色”按钮应为红色。它在 FireFox 中是红色的，但在 Chrome 中不是。我的Chrome版本是。119.0.6045.106 (Official Build) (64-bit)
只有当我删除该规则时，Chrome 才会将其正确显示为红色。&::-moz-focus-inner { ... }
这是 Chrome 中的错误吗？
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>CSS Nesting Test</title>
<style>
button {
&::-moz-focus-inner {
border-width: 0;
}
&:not(:disabled) {
background-color: red;
}
}
</style>
</head>
<body style="margin:0;padding:50px;">
<button>This Button Should Be Red</button>
</body>
</html>答：
2赞
STerliakov
11/18/2023
#1
根据嵌套规范，
如果嵌套的 CSS 规则无效，则将忽略所有包含的样式。这不会影响父规则或前面的规则。
::-moz-focus-inner未列为有效的伪元素，因此 Chrome 将其视为无效选择器。
如果您只需要一个供应商的规则，则可以将它们放在最后。如果需要多个供应商，除了在单独的父规则中定义每个供应商（每个供应商一个组）之外，我看不到任何明显的解决方法。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>CSS Nesting Test</title>
<style>
button {
&:not(:disabled) {
background-color: red;
}
&::-moz-focus-inner {
border-width: 0;
}
}
</style>
</head>
<body style="margin:0;padding:50px;">
<button>This Button Should Be Red</button>
</body>
</html>评论
2赞
Alohci
11/18/2023
嗯，您提供的第一个链接中的示例清楚地表明，遵循具有无效选择器的规则的规则应该“工作正常”，并且前面的散文说“包含此选择器的规则被忽略，但后续有效规则不会”。此外，在Firefox中的同一位置放置无效规则并不能阻止按钮背景变为红色。所以我认为;是 Chrome 错误。
0赞
STerliakov
11/18/2023
@Alohci嗯，我没有给予足够的重视。看起来以下选择器不应该失效。Chrome开发人员可能以与我最初相同的方式阅读这一段......
评论
-moz-focus-inner