Question

我正在查看CSS语法here和here，我很惊讶地看到令牌产生和语法乱七八糟的空格声明。通常在词法分析器中定义一次空格并跳过，永远不会再被看到。同上评论。

我认为对用户代理而不是真正的编译器的定位是这里动机的一部分，也是面对错误的要求，但它看起来仍然很奇怪。

解析CSS的真实UA是否真的根据这些（这些）语法实现了？

编辑：问题的原因实际上是各种LESS实现。 less.js无法理解连续的评论，lessc.exe无法理解选择器内的评论。在这方面，他们甚至无法正确解析CSS，无论如何定义。所以我去看看CSS的实际语法是什么......

Answer 1

CSS虽然与许多编程语言类似，但确实有一些罕见的实例，其中空白可能很重要。

假设我们有以下基本标记：

<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，上面有一些样式，这样你就可以看出它们之间的区别。

现在让我们在外部div中添加另一个类和一个ID：

<div class="blueborder MyClass" id="MyDiv">
    <div class="redborder"></div>
</div>

如果我想以下列方式为外部 div提供背景信息：

.MyClass#MyDiv { background: #ccc; }

......然后空白就变得很重要了。上面的规则设置外部div的样式，因为它的解析方式与以下内容不同：

.MyClass #MyDiv { background: #ccc; }

...没有设计外部div的样式。

要了解如何对它们进行不同的解析，您可以查看选择器的标记方式：

例1：

.MyClass#MyDiv -> DELIM IDENT HASH

例2：

.MyClass #MyDiv -> DELIM IDENT S HASH

如果我们盲目地忽略空白（正如编译器通常那样），我们会错过这种差异。

说到，我并不是说这个语法很好。我在编写语法方面也有相当多的经验，在看这个语法时我很畏缩。最简单的解决方案是将#和.符号添加到IDENT令牌中，然后其他所有内容变得更加容易。

然而他们并没有选择这样做，而且对空白的需求是这个决定的一个神器。

W3C CSS语法，语法怪异

1 个答案: