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

来自W3C：

评论以字符＆＃34; / *＆＃34;开头。并以人物结束＆＃34; * /＆＃34 ;.它们可能出现在其他令牌及其内容之外的任何地方对渲染没有影响。评论可能不会嵌套。

此外，第4.2节处理解析错误的规则

在某些情况下，用户代理必须忽略非法样式表的一部分。此规范将ignore定义为表示用户代理正在解析非法部分（为了找到它的开始和结束），但是否则就好像它不在那里一样。

所以不仅//，即使您的选择器无效，它也会完全跳过下一个区块并转移到第二个区块。

Demo 流浪a选择器，第二个属性块失败，因为之后没有{}

Demo 2 带大括号{}

的选择器

所以一般来说，它不是那里的无效评论，但它是一个无效的语句，导致问题正确地解析你的样式表。

Answer 2

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

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

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

格式错误的语句。用户代理必须处理在解析语句时遇到的意外令牌，方法是读取语句结尾，同时遵守匹配（），[]对的规则， {}，“”和“'，并正确处理转义。例如，格式错误的语句可能包含意外的右括号或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-rule，它通常由一些标记组成，后跟一对花括号（{}）或下一个分号的任何内容（{{ 1}}）。请再次注意，此处的示例都没有;，但由于它是泛型语句中的意外字符，因此预计会导致整个/“规则”被忽略。

Answer 3

来自Official Reference

这条规则就是你所看到的：

在样式表的“顶层”，at-keyword-token启动在规则。任何其他东西都会启动一个合格的规则，并包括在内规则的前奏。这可能会产生一个无效的选择器，但那就是不是CSS解析器的关注 - 最糟糕的是，它意味着选择器什么都不匹配。

也就是说，你的“//”被视为引入一个合格的规则，所以解释器试图使用选择器匹配节点“//这是一个注释@ font-face”，它显然会失败这样做，因为这没有任何意义。

这是您很可能遇到的另一条规则：

在解释声明列表时，任何时候都会有未知语法导致解析器抛弃当前的声明建立，并寻找前进，直到它找到一个分号（或结束块）。然后它开始新鲜，试图再次解析声明。

Answer 4

在浏览器上加载页面然后 右键单击 - >检查元素。您将获得浏览器的窗口底部，在样式部分中该窗口的右侧指定相应控件的所有样式属性。无效的样式属性是交叉的。

如何解释无效的CSS行？

4 个答案: