如何解释在MDN上找到的CSS的“形式语法”

我遇到了一个CSS背景属性,它具有以下值：

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>

背景属性值的顺序是否重要？而且,更一般地说：如何解释MDN上提供的“形式语法”.

解决方法

形式语法是 documented at the MDN site itself.对于Stack Overflow来说,“更一般”的问题可能过于宽泛：如果您有任何具体问题,请查看文档并返回.

您遇到的一个具体问题是背景属性值的顺序是否重要.背景的大多数部分(特别是bg层)由“双条”分隔,根据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.

这在背景属性的实践中有效,正如您可以在此片段中看到的那样,无论顺序如何解析属性相同：

#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>

原文地址：https://www.jb51.cc/css/216096.html