gpt4 book ai didi

css - W3C CSS 语法,语法怪癖

转载 作者:技术小花猫 更新时间:2023-10-29 10:35:26 28 4
gpt4 key购买 nike

我正在看 CSS 语法 herehere我很惊讶地看到 token 产生式和语法中到处都是空白声明。通常空白在词法分析器中定义一次并被跳过,永远不会再出现。同上评论。

我想面向用户代理而不是真正的编译器是这里动机的一部分,也是面对错误继续进行的要求,但这看起来仍然很奇怪。

现实生活中解析 CSS 的 UA 真的是根据这个(这些)语法实现的吗?

编辑:问题的原因实际上是各种 LESS 实现。 less.js 不理解连续注释,lessc.exe 不理解选择器中的注释。在这方面,他们甚至无法正确解析 CSS,但这是已定义的。所以我去看看CSS的实际语法是什么......

最佳答案

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 token 中,然后其他一切都会变得容易得多。

但是他们并没有选择这样做,而对空白的需求是该决定的产物。

关于css - W3C CSS 语法,语法怪癖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6977177/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com