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/…