css - 如何解释在MDN上找到的CSS的 "Formal syntax"

我遇到了CSS background属性，该属性具有以下值:

background: none repeat scroll 0% 0% #F8F8F8;

background属性的语法在this MDN page给出，如下所示:

Formal syntax: [ <bg-layer> , ]* <final-bg-layer>
               where <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
               and <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <background-color>

background属性的值的顺序重要吗？而且，更笼统地说:如何解释MDN上提供的“正式语法”。

最佳答案

形式语法为documented at the MDN site itself。对于堆栈溢出，您遇到的“更一般”的问题可能太笼统了:只需阅读文档，如果有任何特定的问题，请回来。

这样的一个具体问题是background属性的值顺序是否重要。背景的大多数部分(特别是bg层)由“双杠”分隔，根据MDN(正式语法)，这要求不需要特定顺序。在双杠上引用specific documentation:



作为一个脚注，尽管我一直喜欢并使用MDN，但可能更权威的资源是W3.org，您可以在其中找到background shorthand syntax以及CSS Values and Units Module Level 3中的语法说明。它基本上说相同，例如关于“双杠”:



实际上，这适用于background属性，如您在此代码段中所见，无论这些属性的顺序如何，解析都是一样的:

#a { background: 100% / 2% url('http://i.stack.imgur.com/RvUr4.png') red repeat-x; }
#b { background: red repeat-x url('http://i.stack.imgur.com/RvUr4.png') 100% / 2%; }

<div id="a">A</div>
<br />
<div id="b">B</div>

关于css - 如何解释在MDN上找到的CSS的 "Formal syntax"，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27153217/