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

Question

我遇到了一个具有以下值的 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 上提供的这种“形式语法”。

Answer 1

正式语法是documented at the MDN site itself .您遇到的“更一般”的问题对于 Stack Overflow 来说可能太宽泛了:只需阅读文档，如果您有任何具体问题，请回来。

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

Double bar

Separating two or more components by a double bar, ||, means that all entities are options: at least one of them must be present, and they may appear in any order. Typically this is used to define the different values of a shorthand property.

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

A double bar (||) separates two or more options: one or more of them must occur, in any order.

这在实践中适用于 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>