如何在MDN上阅读CSS语法

Question

selectors-list ::=
    selector[:pseudo-class] [::pseudo-element]
    [, selectors-list]

properties-list ::= 
    [property : value] [; properties-list]

我正在尝试熟悉CSS，并且很高兴了解阅读这些规则（从https://developer.mozilla.org/en-US/docs/Web/CSS/Reference开始）。

Answer 1

此MDN页面似乎使用伪BNF表示法来描述CSS语法。使用的表示法非常令人困惑，因为[]::: ;和,在CSS中都具有某些含义，但是它们使用[]表示可选部分，并使用::=表示语法规则。

我可以给你一个粗略的英文翻译，意思是：

style-rule ::=
    selectors-list {
      properties-list
    }

样式规则是由一个选择器列表，然后是{，然后是一个属性列表，然后是}。

selectors-list ::=
    selector[:pseudo-class] [::pseudo-element]
    [, selectors-list]

[选择器列表由一个选择器组成，可选地后跟:和一个伪类，可选地后跟::和一个伪元素，可选地后跟,和另一个选择器列表。

此定义不仅不正确（您可能连续使用多个伪类），而且名称令人困惑。如果伪类和伪元素与选择器分开，为什么将这三个列表都称为选择器列表？

放在一边...

properties-list ::= 
    [property : value] [; properties-list]

一个属性列表可以完全为空，或者可以包含一个属性，后跟:，后跟一个值，还可以包含;和另一个属性列表。

然后，他们甚至不使用伪BNF来定义什么是选择器，伪类，伪元素，属性或值。整个表示方式比有用的方式更令人困惑。该MDN页面可能应该被重写。