css - 如何解释无效的 CSS 行？

Question

我花了大约 30 分钟来 debug a font loading页面中的问题，我终于发现我使用了错误的评论:

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

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

在 /* ... */ 中更改 // 后，字体已正确加载。

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

上面的例子只是一个例子。问题是关于一般无效行。

欢迎提供良好的官方引用。

Answer 1

关于 / 的事情是它不会出现在注释分隔符或字符串之外的 CSS2.1 语法中的任何地方，所以如果您正在查看 grammar ，很难准确地说出它会如何影响样式表解析。

它可以算作格式错误的选择器，因为 CSS 的基本构建 block 由一个选择器和一个声明 block (统称为规则集)组成，但是由于 / 没有出现在 Selectors 语法中除了字符串值，而选择器不是，我会犹豫是否将其视为选择器。

我会说，在这种特定情况下，它只是一个通用的 statement that's malformed :

• Malformed statements. User agents must handle unexpected tokens encountered while parsing a statement by reading until the end of the statement, while observing the rules for matching pairs of (), [], {}, "", and '', and correctly handling escapes. For example, a malformed statement may contain an unexpected closing brace or at-keyword. E.g., the following lines are all ignored:

  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 “规则”被忽略。