如何阅读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]

选择器列表由选择器、可选的:和伪类、可选的::和伪元素、可选的,和另一个选择器列表组成。

这个定义不仅不正确(您可能会在一行中使用多个伪类)，而且名称令人困惑。如果伪类和伪元素是从选择器中分离出来的，那么为什么要把这三个元素的列表称为selectors-list呢？

抛开这个不谈..。

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

属性列表可以是完全空的，也可以包含一个属性，后跟:，后跟一个值，还可以选择后跟;和另一个属性列表。

然后，它们甚至不使用伪BNF来定义什么是选择器、伪类、伪元素、属性或值。整个符号更让人困惑，而不是有帮助。这个MDN页面可能应该重写一下。