这篇翻译不完整。请帮忙从英语翻译这篇文章。
摘要
属性 list-style-type 指定一个列表元素的外观。
As it is the only one who defaults to display:list-item
, this is usually a <li>
element, but can be any element with this display
value.
初始值 | disc |
---|---|
适用元素 | list items |
是否是继承属性 | yes |
适用媒体 | visual |
计算值 | as specified |
是否适用于 CSS 动画 | 否 |
正规顺序 | the unique non-ambiguous order defined by the formal grammar |
标志的颜色要和应用到该元素的计算颜色一样。
语法
Formal syntax: <counter-style> | <string> | nonewhere
<counter-style> = <counter-style-name> | symbols()
where
<counter-style-name> = <custom-ident>
取值
none
- 不显示列表项的标记。
关键字的取值是下列之一:
disc
-
- 实心圆点 (默认值)
circle
-
- 空心圆点
square
-
- 实心方块
decimal
-
- 十进制阿拉伯数字
- 从1开始
cjk-decimal
-
- 中日韩十进制数
- 例如: 一, 二, 三, ..., 九八, 九九, 一〇〇
decimal-leading-zero
-
- Decimal numbers
- Padded by initial zeros
- E.g. 01, 02, 03, … 98, 99
lower-roman
-
- Lowercase roman numerals
- E.g. i, ii, iii, iv, v…
upper-roman
-
- Uppercase roman numerals
- E.g. I, II, III, IV, V…
lower-greek
-
- Lowercase classical Greek
- alpha, beta, gamma…
- E.g. α, β, γ…
lower-alpha
lower-latin
-
- Lowercase ASCII letters
- E.g. a, b, c, … z
lower-latin
is unsupported in IE7 and earlier- See Browser compatibility section.
upper-alpha
upper-latin
-
- Uppercase ASCII letters
- E.g. A, B, C, … Z
upper-latin
is unsupported in IE7 and earlier
armenian
-
- Traditional Armenian numbering
- (ayb/ayp, ben/pen, gim/keem…
georgian
-
- Traditional Georgian numbering
- E.g. an, ban, gan, … he, tan, in…
hebrew
-
- Traditional Hebrew numbering
- ethiopic-numeric
-
- Example
hiragana
-
- a, i, u, e, o, ka, ki, …
- (Japanese)
katakana
-
- A, I, U, E, O, KA, KI, …
- (Japanese)
hiragana-iroha
-
- i, ro, ha, ni, ho, he, to, …
- Iroha is the old japanese ordering of syllabs.
katakana-iroha
-
- I, RO, HA, NI, HO, HE, TO, …
- Iroha is the old japanese ordering of syllabs.
japanese-informal
-
- Japanese informal numbering
japanese-formal
-
- Japanese formal numbering to be used in legal or financial document.
- E.g., 壱萬壱阡壱百壱拾壱
- The kanjis are designed so that they can't be modified to look like another correct one
korean-hangul-formal
-
- Korean hangul numbering.
- E.g., 일만 일천일백일십일
korean-hanja-informal
-
- Korean hanja numbering.
- E.g., 萬 一千百十一
korean-hanja-formal
-
- Formal Korean Han numberging.
- E.g. 壹萬 壹仟壹百壹拾壹
simp-chinese-informal
-
- Simplified Chinese informal numberging.
- E.g. 一万一千一百一十一
cjk-ideographic
-
- Identical to
simp-chinese-informal
- E.g. 一万一千一百一十一
- Identical to
simp-chinese-formal
-
- Simplified Chinese formal numberging.
- E.g. 壹万壹仟壹佰壹拾壹
trad-chinese-informal
-
- Traditional Chinese informal numberging.
- E.g. 一萬一千一百一十一
trad-chinese-formal
-
- Traditional Chinese formal numberging.
- E.g. 壹萬壹仟壹佰壹拾壹
非标准扩展
Extended set of values provided by Mozilla (Firefox), Blink (Chrome and Opera) and WebKit (Safari) to support list types in other languages. See the compatibility table to check which browsers supports which extension.
- arabic-indic
- -moz-arabic-indic
-
- Example
- bengali
- -moz-bengali
-
- Example
- cjk-earthly-branch
- -moz-cjk-earthly-branch
-
- Example
- cjk-heavenly-stem
- -moz-cjk-heavenly-stem
-
- Example
- devanagari
- -moz-devanagari
-
- Example
- -moz-ethiopic-halehame
-
- Example
- -moz-ethiopic-halehame-am
-
- Example
- ethiopic-halehame-ti-er
- -moz-ethiopic-halehame-ti-er
-
- Example
- ethiopic-halehame-ti-et
- -moz-ethiopic-halehame-ti-et
-
- Example
- gujarati
- -moz-gujarati
-
- Example
- gurmukhi
- -moz-gurmukhi
-
- Example
- hangul
- -moz-hangul
-
- Example
- Example
- Example
- hangul-consonant
- -moz-hangul-consonant
-
- Example
- Example
- Example
- kannada
- -moz-kannada
-
- Example
- khmer
- -moz-khmer
-
- Example
- lao
- -moz-lao
-
- Example
- malayalam
- -moz-malayalam
-
- Example
- myanmar
- -moz-myanmar
-
- Example
- oriya
- -moz-oriya
-
- Example
- persian
- -moz-persian
-
- Example
- -moz-tamil
-
- Example
- telugu
- -moz-telugu
-
- Example
- thai
- -moz-thai
-
- Example
- urdu
- -moz-urdu
-
- Example
例子
CSS
ol.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>
Result
注释
- Some list-style-types require a suitable font installed to display as expected.
- The cjk-ideographic is identical to trad-chinese-informal. (It exists for legacy reasons.)
- The CSS specification does not define how alphabetic systems wrap at the end of the alphabet. For instance, after 26 list items,
upper-alpha
rendering is undefined. Firefox and other browsers will continue as AA, AB, AC,... For long lists, it is recommended that authors specify true numbers.
规范
Specification | Status | Comment |
---|---|---|
CSS Lists and Counters Module Level 3 list-style-type |
Working Draft | Adds support for identifiers used in @counter-style rules to keywords.Adds 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 , , cjk , ethiopic style types. |
CSS Level 2 (Revision 1) list-style-type |
Recommendation | Initial definition. |
浏览器兼容性
Feature | Chrome | 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 | 1.0 (1.0) | 4.0 | 3.5 | 1.0 (85) |
lower-latin , upper-latin , lower-greek , armenian , georgian |
1.0 | 1.0 (1.0) | 8.0 | 6.0 | 1.0 (85) |
decimal-leading-zero |
1.0 | 1.0 (1.0) | 8.0 | 8.0 | 1.0 (85) |
hebrew , cjk-ideographic , hiragana , hiragana-iroha , katakana , katakana-iroha |
1.0 | 1.0 (1.0) | 未实现 | 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 |
未实现 | 1.0 (1.7 or earlier) -moz 28.0 (28.0) |
未实现 | 未实现 | 未实现 |
korean-hangul-formal , korean-hanja-informal , , cjk |
未实现 | 28.0 (28.0) | 未实现 | 未实现 |
未实现
|
ethiopic-numeric |
未实现 | 1.0 (1.7 or earlier) -moz | 未实现 | 未实现 |
未实现 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |