[小筆記]為什麼 li 加上 display:block 會清除樣式

當我們在寫下以下語法時

See the Pen by 蔡蔡 Mavis (@0430shinyu) on CodePen.

而當我們加上 display:block 後

li{
  display: block;
}

會出現下面的畫面

這可能會讓我們感到很疑惑，而會出現這樣的結果是因為 li 的預設是 display:list-item。

關於 list-item 在 W3C CSS3 的解釋如下：

A list item is any element with its display property set to list-item. List items generate ::marker pseudo-elements; no other elements do. Additionally, list items automatically increment an implied list-item counter

大意是說 list item 會生成 ::marker 偽元素，並且會自動增加 list item 的計數器。