W3C CSS语法，语法复制 [英] W3C CSS grammar, syntax oddities
问题描述
我刚看过CSS语法这里和< a href =http://www.w3.org/TR/CSS21/grammar.html =nofollow>这里，我很惊讶地看到令牌产生和文法与空格的声明。通常，空格在词法分析器中定义一次，并跳过，从不再被看到。 Ditto意见。
I was having a look at the CSS syntax here and here and I was amazed to see both the token productions and the grammar littered with whitespace declarations. Normally whitespace is defined once in the lexer and skipped, never to be seen again. Ditto comments.
我想象朝向用户代理而不是真正的编译器的方向是这里的动机的一部分，也是面对错误继续进行的要求，但是它仍然看起来很奇怪。
I imagine the orientation towards user-agents rather than true compilers is part of the motivation here, and also the requirement to proceed in the face of errors, but it still seems pretty odd.
现实生活中的UA解析CSS是否真的实现了这些（这些）语法？
Are real-life UAs that parse CSS really implemented according to this (these) grammars?
编辑：问题的原因实际上是各种LESS实现。 less.js 不了解连续的注释， lessc.exe 无法理解选择器中的注释。在这方面，他们甚至不能够正确解析CSS，但是定义。所以我去看看CSS的实际语法和...
reason for the question is actually the various LESS implementations. less.js doesn't understand consecutive comments, and lessc.exe doesn't understand comments inside selectors. In this respect they are not even able to parse CSS correctly, however that is defined. So I went to see what the actual grammar of CSS was and ...
推荐答案
CSS与许多编程语言类似，
CSS, while similar to many programming languages, does have some rare instances where whitespace can be important.
假设我们有以下基数标记：
Say we have the following base markup:
<html>
<head>
<style type="text/css">
.blueborder { width:200px; height:200px; border: solid 2px #00f; }
.redborder { width:100px; height:100px; margin:50px; border: solid 2px #f00; }
</style>
</head>
<body>
<div class="blueborder">
<div class="redborder"></div>
</div>
</body>
</html>
这里没有什么特别的，除了div里面有一个div，有一些样式，
There's nothing special here, except a div inside of a div, with some styles on it so that you can see the difference between them.
现在可以向外部div添加另一个类和ID：
Now lets add another class and an ID to the outer div:
<div class="blueborder MyClass" id="MyDiv">
<div class="redborder"></div>
</div>
如果我想给后面的外部方式：
If I want to give a background to the outer div in the following manner:
.MyClass#MyDiv { background: #ccc; }
...那么空格变得很重要。 之上的规则会对外部div进行样式设置，因为它的解析方式与以下格式不同：
...then the whitespace becomes important. The rule above does style the outer div, as it is parsed differently than the following:
.MyClass #MyDiv { background: #ccc; }
...不会为外部div设置样式。
...which does NOT style the outer div.
要查看这些解析方式是否不同，您可以查看如何对选择器进行标记：
To see how these are parsed differently, you can look at how the selectors are tokenized:
示例1：
.MyClass#MyDiv -> DELIM IDENT HASH
示例2：
.MyClass #MyDiv -> DELIM IDENT S HASH
如果我们盲目忽略空格（编译器通常这样做）这个区别。
If we were to blindly ignore whitespace (as compilers usually do), we would miss this difference.
有人说，我不是说这个语法是好的。我也有相当数量的写作语法的经验，我看看这种语法的时候很紧张。最简单的解决方案是将＃和。符号添加到IDENT令牌中，然后一切变得更容易。
With that being said, I am not implying that this grammer is good. I also have a fair amount of experience in writing grammars, and I cringe when looking at this grammar. The easiest solution would have been to add the # and . symbols into the IDENT token and then everything else becomes much easier.
但是他们没有选择这样做，对空白的需要是这个决定的一个假象。
However they did not chose to do this, and the need for whitespace is an artifact of that decision.
这篇关于W3C CSS语法，语法复制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
