文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

列表样式类型 | list-style-type

list-style-type属性指定列表项元素的外观。

代码语言：javascript
复制
/* Partial list of types */
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: georgian;
list-style-type: cjk-ideographic;
list-style-type: kannada;

/* A <string> */
list-style-type: '-';

/* Identifier matching an @counter-style rule */
list-style-type: custom-counter-style;

list-style-type: none;

/* Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: unset;

由于该<li>元素是唯一默认的属性display:list-item，所以该属性通常应用于<li>元素，但可以应用于其display值为的任何元素list-item。

初始值

disc

应用于

list items

是否继承

yes

适用媒体

visual

计算值

as specified

Animation type

discrete

规范顺序

the unique non-ambiguous order defined by the formal grammar

颜色标记的颜色将与其应用的元素的计算颜色相同。

注意：这个属性应用于列表项目，即元素display: list-item; 默认情况下包含<li>元素。由于此属性是继承的，因此可以在父元素上设置（通常<ol>或<ul>）以使其适用于所有列表项。

语法

列表样式类型属性可以定义为下列任何一种：

  • <custom-ident>价值
  • 一个symbols()
  • <string>值
  • 关键词none.

取值

<custom-ident>匹配的一个值A的标识符@counter-style或预定义的样式之一：symbols()（https://developer.mozilla.org/en-US/docs/Web/CSS/symbols）定义列表的匿名风格。<string>指定的字符串将被用作项目的标记，none不显示项目标记。disc

  • 默认值circle
  • 空心圆

square

  • 满正方形decimal
  • 十进制数
  • 从1开始

cjk-decimal

  • 汉十进制数
  • 例如一，二，三，...，九八，九九，一00

decimal-leading-zero

  • 十进制数
  • 用初始零填充
  • 例如01，02，03，…98，99

lower-roman

  • 小写罗马数字
  • 例如I，II，III，IV，V…

upper-roman

  • 大写罗马数字
  • 例如I，II，III，IV，V…

lower-greek

  • 小写古典希腊文
  • 阿尔法，贝塔，伽马…
  • 例如α，β，γ…

lower-alphalower-latin

  • 小写ASCII字母
  • 例如a，b，c，…z
  • lower-latin在IE7和更早版本中不受支持。
  • 见浏览器兼容性部分。

upper-alphaupper-latin

  • 大写ASCII字母
  • 例如A，B，C，…Z
  • upper-latin在IE7和更早版本中不受支持。

arabic-indic-moz-arabic-indic

  • 例armenian
  • 传统亚美尼亚编号
  • （ ayb/AYP，Ben/PEN，GIM/KEEM…

bengali-moz-bengali

  • 例cambodian*
  • 例
  • 的同义词khmer

cjk-earthly-branch-moz-cjk-earthly-branch

  • 例cjk-heavenly-stem-moz-cjk-heavenly-stem
  • 例

cjk-ideographic

  • 同trad-chinese-informal
  • 例如一萬一千一百一十一

devanagari-moz-devanagari

  • 例ethiopic-numeric
  • 例

georgian

  • 传统格鲁吉亚编号
  • 例如，班，甘，…他，晒黑，在…

gujarati-moz-gujarati

  • 例gurmukhi-moz-gurmukhi
  • 例

hebrew

  • 传统希伯来语编号hiragana
  • A，我，u，e，o，ka，ki，…
  • （日本人）

hiragana-iroha

  • 我，罗，哈，妮，呵，他，到，…
  • 伊洛哈是旧的日本人对三段式的排序。

japanese-formal

  • 在法律或金融文件中使用的日语正式编号。
  • 例如，壱萬壱阡壱百壱拾壱
  • Kanjis的设计使得它们可以被修改成另一个正确的

japanese-informal

  • 日语非正式编号kannada-moz-kannada
  • 例

katakana

  • A，I，U，E，O，Ka，Ki，…
  • %28日本人%29

katakana-iroha

  • 我，RO，HA，NI，Ho，HE，to，…
  • 伊洛哈是旧的日本人对三段式的排序。

khmer-moz-khmer

  • 例korean-hangul-formal
  • 朝鲜语编号。
  • 例如，商品价格

korean-hanja-formal

  • 正式的韩语编号。
  • 例如壹萬壹仟壹百壹拾壹

korean-hanja-informal

  • 韩国韩语编号。
  • 例如，萬一千百十一

lao-moz-lao

  • 例lower-armenian%2A
  • 例

malayalam-moz-malayalam

  • 例mongolian
  • 例

myanmar-moz-myanmar

  • 例oriya-moz-oriya
  • 例

persian-moz-persian

  • 例simp-chinese-formal
  • 简体中文正式编号。
  • 例如壹万壹仟壹佰壹拾壹

simp-chinese-informal

  • 简体中文非正式编号。
  • 例如一万一千一百一十一

tamil-moz-tamil

  • 例telugu-moz-telugu
  • 例

thai-moz-thai

  • 例tibetan%2A
  • 例

trad-chinese-formal

  • 传统中文正式编号。
  • 例如壹萬壹仟壹佰壹拾壹

trad-chinese-informal

  • 中国传统的非正式编号。
  • 例如一萬一千一百一十一

upper-armenian%2A

  • 例disclosure-open
  • 符号，表示公开小部件(如<details>被打开了。

disclosure-closed

  • 表示公开小部件的符号，如<details>已经关闭了。非标准扩展Mozilla%28Firefox%29、Blink%28Chrome和Opera%29以及WebKit%28Safari%29提供了一些预定义类型，以支持其他语言中的列表类型。请参阅兼容性表，以检查哪个浏览器支持哪个扩展。-moz-ethiopic-halehame
  • 例

-moz-ethiopic-halehame-am

  • 例ethiopic-halehame-ti-er-moz-ethiopic-halehame-ti-er
  • 例

ethiopic-halehame-ti-et-moz-ethiopic-halehame-ti-et

  • 例hangul-moz-hangul
  • 例
  • 例
  • 例

hangul-consonant-moz-hangul-consonant

  • 例
  • 例
  • 例

urdu-moz-urdu

  • 例形式语法<counter-style> | <string> | nonewhere <counter-style> = <counter-style-name> | symbols() where <counter-style-name> = <custom-ident>实例CSSol.normal { list-style-type: upper-alpha; } /* or use the shortcut "list-style": */ ol.shortcut { list-style: upper-alpha; }HTML<ol class="normal">List 1 <li>Hello</li> <li>World</li> <li>What's up?</li> </ol> <ol class="shortcut">List 2 <li>Looks</li> <li>Like</li> <li>The</li> <li>Same</li> </ol>结果二次注记
  • 有些类型需要安装合适的字体才能按预期显示。
  • cjk-ideographic是相同的trad-chinese-informal它的存在是因为遗留的原因。

规范

Specification

Status

Comment

CSS Counter Styles Level 3The definition of 'list-style-type' in that specification.

Candidate Recommendation

Redefines CSS2.1 counters. Extends the syntax to support @counter-style rules. Defines using @counter-style the usual style types: hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha, japanese-formal, japanese-informal, simp-chinese-formal, trad-chinese-formal, simp-chinese-formal, trad-chinese-formal,korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal, ethiopic-numeric, disclosure-open and disclosure-closed. Extends <counter-style> with the symbols() functional notation.

CSS Lists and Counters Module Level 3The definition of 'list-style-type' in that specification.

Working Draft

Modify syntax to support for identifiers used in @counter-style rules to keywords. Support for a simple <string>.

CSS Level 2 (Revision 1)The definition of 'list-style-type' in that specification.

Recommendation

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari (WebKit)

Basic support including : none, disc, circle, square, decimal, lower-alpha, upper-alpha, lower-roman, upper-roman

1.0

(Yes)

1.0 (1.0)

4.0

3.5

1.0 (85)

lower-latin, upper-latin, lower-greek, armenian, georgian

1.0

(Yes)

1.0 (1.0)

8.0

6.0

1.0 (85)

decimal-leading-zero

1.0

(Yes)

1.0 (1.0)

8.0

8.0

1.0 (85)

hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha

1.0

No support

1.0 (1.0)

No support

7.0 (but displays decimal numbers only) 15.0

1.0-1.2 (85-125)

japanese-formal, japanese-informal, simp-chinese-formal, trad-chinese-formal, simp-chinese-informal, trad-chinese-informal

No support

No support

1.0 (1.7 or earlier) -moz 28.0 (28.0)

No support

No support

No support

korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal

No support

No support

28.0 (28.0)

No support

No support

No support

ethiopic-numeric, persian, arabic-indic, devanagari, bengali, gurmukhi, gujarati, oriya, tamil, telugu, kannada, malayalam, thai, lao, myanmar, khmer, cjk-heavenly-stem, cjk-earthly-branch

No support

No support

1.0 (1.7 or earlier) -moz 33.0 (33.0) 1

No support

No support

No support

disclosure-open, disclosure-closed, mongolian

No support

No support

33.0 (33.0)

No support

No support

No support

<string>

No support

No support

39.0 (39.0)

No support

No support

No support

Feature

Android

Edge

Firefox Mobile (Gecko)

IE Phone

Opera Mobile

Safari Mobile

Basic support

?

(Yes)

?

?

?

?

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com