list-style 不止有 none

list-style 不止有 none

初始化項目的時候，習慣了在 reset.css 裏面隨手一個 list-style: none 的童鞋請舉爪~

這幾天在作富文本編輯的 list 部分，正好用到了 list-style 這個屬性，才發現原來這個屬性有這麼的設置項，特意記錄分享一下，原來 list-style 不止有 none。

list-style 是由 list-style-type, list-style-image 和 list-style-position 三個屬性組合的簡寫屬性。每一個屬性均可單獨設置，也能夠直接設置在 list-style 上。下面分別介紹這三個屬性。

在線查看，效果更佳

list-style-type

制定具備 display: list-item 屬性的列表元素的外觀，通常指 li 元素。

disc

• 實心圓點 (默認值)

circle

• 空心圓點

square

• 實心方塊

decimal

• 十進制阿拉伯數字

cjk-decimal

• 中日韓十進制數

decimal-leading-zero

• 十進數

lower-roman

• 小寫羅馬數字

upper-roman

• 大寫羅馬數字

lower-greek

• 小寫希臘數字

lower-alpha

• 小寫 ASCII

lower-latin

• 小寫 ASCII（IE7 如下不支持）

upper-alpha

• 大寫 ASCII

upper-latin

• 大寫 ASCII（IE7 如下不支持）

armenian

• 傳統美式數字

georgian

• 傳統英式數字

hebrew

• 傳統希伯來數字

ethiopic-numeric

• 埃塞俄比亞數字

hiragana

• 平假名數字（日語）

katakana

• 片假名數字（日語）

hiragana-iroha

• 舊式平假名數字（日語）

katakana-iroha

• 舊式平假名數字（日語）

japanese-informal

• 日語非正式數字

japanese-formal

• 日語數字

korean-hangul-formal

• 韓文數字

korean-hanja-informal

• 韓式數字

korean-hanja-formal

• 韓式數字（繁體）

simp-chinese-informal

• 中文數字

cjk-ideographic

• 中文數字

simp-chinese-formal

• 大寫繁體中文數字

trad-chinese-informal

• 繁體中文數字

trad-chinese-formal

• 大寫繁體中文數 字

list-style-position

設置標記相對於元素的位置

outside

• 標記盒在主塊盒的外面。

inside

• 標記盒是主要塊盒中的第一個行內盒，處於元素的內容流以後。

list-style-image

設置列表元素的標記設置爲指定圖片

ul{
  list-style-image: url('https://qishaoxuan.github.io/css_tricks/assets/img/arrow.0ad29aea.svg')
}
複製代碼

查看動態設置

developer.mozilla.org/en-US/docs/…