如何解释无效的CSS行？

Question

我花了大约30分钟来调试页面中的字体加载问题,我终于发现我使用了错误的评论:

// this is a comment
@font-face {
   /* is this ignored? */
   ...
}

.box {
  border: ... /* this was not ignored */
}

更改//后/* ... */的字体正确加载.

所以,我的问题是:如何解释无效的CSS行？它们是被忽略还是其他CSS属性受到影响？

上面的例子只是一个例子.问题是一般的无效线.

欢迎提供良好的官方参考.

Answer 1

问题在于/，它不会出现在 CSS2.1 语法中注释分隔符或字符串之外的任何位置，因此，如果您查看语法，很难准确判断它如何影响样式表解析。

它可以算作格式错误的选择器，因为 CSS 的基本构建块由选择器和声明块（统称为规则集）组成，但由于/除了字符串值（选择器不是）之外，它不会出现在选择器语法中，所以我会犹豫是否将其视为选择器。

我想说，在这个具体情况下，这只是一个格式错误的通用语句：

• 格式错误的陈述。用户代理必须通过读取直到语句末尾来处理解析语句时遇到的意外标记，同时遵守 ()、[]、{}、"" 和 '' 匹配对的规则，并正确处理转义。例如，格式错误的语句可能包含意外的右大括号或 at 关键字。例如，以下几行都将被忽略：

  p @here {color: red}     /* ruleset with unexpected at-keyword "@here" */
  @foo @bar;               /* at-rule with unexpected at-keyword "@bar" */
  }} {{ - }}               /* ruleset with unexpected right brace */
  ) ( {} ) p {color: red } /* ruleset with unexpected right parenthesis */
  

语句被定义为规则集或 at 规则，通常由一些标记组成，后跟一对大括号 ( {}) 或直到下一个分号 ( ;) 的任何内容。再次注意，这里的示例都没有/，但由于它是通用语句中的意外字符，因此预计它会导致您的整个@font-face“规则”被忽略。