如何解釋CSS文檔符號？

Question

我瞭解CSS Grid佈局和the article使用如下標記：

repeat([ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>?) 

我對[] <> ? +

平均不清楚這是符號標準或有名字嗎？如果是這樣，我可以在哪裏學習如何解釋？

Answer 1

下面的代碼表示模板，你需要使用repeat()：

repeat([ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>?) 

打破下來，有問題的部件含義如下：

• []表示必需的參數。顯然你需要提供一些重複的內容，以及重複的頻率。 第一個的參數是重複的次數，這顯然需要是一個正數整數。 第二個的說法是什麼重複。
• <>表示立即包含的是佔位符。該文檔試圖通過指定明顯的描述符來澄清這些組件，例如positive-integer，但希望您填寫這些值。
• ?表示可選參數。任何直接跟着問號的參數都是可選的。也就是說，您不需要需要爲正在重複的內容提供line-names。
• +代表一個或多個。第二個<line-names>是結束點。如果提供，repeat()只會到達該行。未提供時，它將繼續按照<positive-integer>中指定的值。實質上，就像?一樣，+告訴你，你可以可以提供一個終點，但不必。

如圖所示直接下面你鏈接的文檔模板，使用repeat()代碼樣本位將是：

grid-template-columns: repeat(4, 30px 100px); 

這是相同的話說：

grid-template-columns: 30px 100px 30px 100px 30px 100px 30px 100px; 

這是因爲第二個參數（字符串30px 100px）重複了第一個參數（4）指定的次數。在這個例子中沒有提供行名或終點，就像在最常見的用例場景中那樣。

有關CSS Grid的repeat()的更多信息，請參閱Alligator.io。

希望這會有所幫助！ :)

Answer 2

這些符號對於CSS網格佈局規範不是唯一的。

它們用於所有CSS屬性的定義。

有關完整說明，請參見CSS Values and Units Module規範。

特別是，請參閱下面的部分，它解釋了每個符號的含義。

2. Value Definition Syntax

這裏所描述的語法用於定義所述一組有效值 爲CSS屬性。屬性值可以有一個或多個組件。

對於這種類型的語法的解釋閱讀關於Backus-Naur。