list-style-type
list-style-type
CSS 属性设置列表项元素的标记(例如圆点、字符或自定义计数器样式)。
试一试
语法
/* 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: trad-chinese-informal;
list-style-type: kannada;
/* <string> value */
list-style-type: "-";
/* Identifier matching an @counter-style rule */
list-style-type: custom-counter-style;
/* Keyword value */
list-style-type: none;
/* Global values */
list-style-type: inherit;
list-style-type: initial;
list-style-type: revert;
list-style-type: revert-layer;
list-style-type: unset;
list-style-type
属性可以定义为以下任何一个:
<custom-ident>
值,symbols()
值,<string>
值,或- 关键字
none
。
请注意:
- 某些类型需要安装合适的字体才能按预期显示。
cjk-ideographic
与trad-chinese-informal
相同;它出于遗留原因而存在。
Values
<custom-ident>
-
与
@counter-style
的值或预定义样式之一匹配的标识符 symbols()
-
定义列表的匿名样式。
<string>
-
指定的字符串将用作项目的标记。
none
-
不显示项目标记。
disc
-
实心圆(默认值)。
circle
-
空心圆。
square
-
实心正方形。
decimal
-
十进制数字,从 1 开始。
cjk-decimal
-
汉字十进制数字。
decimal-leading-zero
-
十进制数字,用初始零填充。
lower-roman
-
小写罗马数字。
upper-roman
-
大写罗马数字。
lower-greek
-
小写古典希腊语。
lower-alpha
,lower-latin
-
小写 ASCII 字母。
upper-alpha
,upper-latin
-
大写 ASCII 字母。
arabic-indic
,-moz-arabic-indic
-
阿拉伯-印度数字。
亚美尼亚语
-
传统亚美尼亚数字。
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
-
埃塞俄比亚数字。
格鲁吉亚语
-
传统格鲁吉亚数字。
gujarati
,-moz-gujarati
-
古吉拉特语数字。
gurmukhi
,-moz-gurmukhi
-
旁遮普语数字。
希伯来语
-
传统希伯来语数字。
平假名
-
字典顺序平假名字母。
hiragana-iroha
-
五十音图顺序平假名字母。
japanese-formal
-
日语正式数字,用于法律或金融文件。汉字设计成无法修改成另一个正确的汉字。
japanese-informal
-
日语非正式数字。
kannada
,-moz-kannada
-
卡纳达语数字。
片假名
-
字典顺序片假名字母。
katakana-iroha
-
五十音图顺序片假名字母。
korean-hangul-formal
-
韩语韩文数字。
korean-hanja-formal
-
正式韩语汉字数字。
korean-hanja-informal
-
韩语汉字数字。
lao
,-moz-lao
-
老挝语数字。
lower-armenian
-
小写亚美尼亚数字。
malayalam
,-moz-malayalam
-
马拉雅拉姆语数字。
蒙古语
-
蒙古语数字。
myanmar
,-moz-myanmar
-
缅甸语(缅甸)数字。
oriya
,-moz-oriya
-
奥里亚语数字。
persian
,-moz-persian
-
波斯语数字。
simp-chinese-formal
-
简体中文正式数字。
simp-chinese-informal
-
简体中文非正式数字。
tamil
,-moz-tamil
-
泰米尔语数字。
telugu
,-moz-telugu
-
泰卢固语数字。
thai
,-moz-thai
-
泰语数字。
藏语
-
藏语数字。
trad-chinese-formal
-
繁体中文正式数字。
trad-chinese-informal
-
繁体中文非正式数字。
upper-armenian
-
传统大写亚美尼亚数字。
disclosure-open
-
表示诸如
<details>
之类的显示小部件已打开的符号。 disclosure-closed
-
表示诸如
<details>
之类的显示小部件已关闭的符号。
请参阅所有列表样式类型示例以查看上述值的实际效果。所有可用计数器样式的详细信息(这些样式由世界各地各种文化使用)可以在预定义计数器样式中找到。
非标准扩展
Mozilla(Firefox)支持一些预定义类型,并带有-moz-
前缀。
ethiopic-halehame
:-moz-ethiopic-halehame
ethiopic-halehame-am
:-moz-ethiopic-halehame-am
ethiopic-halehame-ti-er
:-moz-ethiopic-halehame-ti-er
ethiopic-halehame-ti-et
:-moz-ethiopic-halehame-ti-et
ethiopic-numeric
:-moz-ethiopic-numeric
hangul
:-moz-hangul
hangul-consonant
:-moz-hangul-consonant
urdu
:-moz-urdu
请参阅兼容性表以检查哪些浏览器支持哪些扩展。
无障碍访问
如果Safari的有序或无序列表的list-style-type
值为none
,则它不会在辅助功能树中将该列表识别为列表。可以通过向列表的起始标签添加role="list"
来解决此问题。要详细了解此问题和潜在的解决方法,请参阅list-style
。
正式定义
正式语法
list-style-type =
<counter-style> |
<string> |
none
<counter-style> =
<counter-style-name> |
<symbols()>
<symbols()> =
symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> =
cyclic |
numeric |
alphabetic |
symbolic |
fixed
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
示例
设置列表项标记
HTML
List 1
<ol class="normal">
<li>Hello</li>
<li>World</li>
<li>What's up?</li>
</ol>
List 2
<ol class="shortcut">
<li>Looks</li>
<li>Like</li>
<li>The</li>
<li>Same</li>
</ol>
CSS
ol.normal {
list-style-type: upper-alpha;
}
/* or use the shortcut "list-style": */
ol.shortcut {
list-style: upper-alpha;
}
结果
所有列表样式类型
HTML
<ol>
<li>Apollo</li>
<li>Hubble</li>
<li>Chandra</li>
<li>Cassini-Huygens</li>
<li>Spitzer</li>
</ol>
<h2>Choose a list style type:</h2>
<div class="container">
<label for="disc">
<input type="radio" id="disc" name="type" value="disc" />disc
</label>
<label for="circle">
<input type="radio" id="circle" name="type" value="circle" />circle
</label>
<label for="square">
<input type="radio" id="square" name="type" value="square" />square
</label>
<label for="decimal">
<input type="radio" id="decimal" name="type" value="decimal" />decimal
</label>
<label for="cjk-decimal">
<input
type="radio"
id="cjk-decimal"
name="type"
value="cjk-decimal" />cjk-decimal
</label>
<label for="decimal-leading-zero">
<input
type="radio"
id="decimal-leading-zero"
name="type"
value="decimal-leading-zero" />decimal-leading-zero
</label>
<label for="lower-roman">
<input
type="radio"
id="lower-roman"
name="type"
value="lower-roman" />lower-roman
</label>
<label for="upper-roman">
<input
type="radio"
id="upper-roman"
name="type"
value="upper-roman" />upper-roman
</label>
<label for="lower-greek">
<input
type="radio"
id="lower-greek"
name="type"
value="lower-greek" />lower-greek
</label>
<label for="lower-alpha">
<input
type="radio"
id="lower-alpha"
name="type"
value="lower-alpha" />lower-alpha, lower-latin
</label>
<label for="upper-alpha">
<input
type="radio"
id="upper-alpha"
name="type"
value="upper-alpha" />upper-alpha, upper-latin
</label>
<label for="arabic-indic">
<input
type="radio"
id="arabic-indic"
name="type"
value="arabic-indic" />arabic-indic
</label>
<label for="armenian">
<input type="radio" id="armenian" name="type" value="armenian" />armenian
</label>
<label for="bengali">
<input type="radio" id="bengali" name="type" value="bengali" />bengali
</label>
<label for="cambodian">
<input type="radio" id="cambodian" name="type" value="cambodian" />cambodian
</label>
<label for="cjk-earthly-branch">
<input
type="radio"
id="cjk-earthly-branch"
name="type"
value="cjk-earthly-branch" />cjk-earthly-branch
</label>
<label for="cjk-heavenly-stem">
<input
type="radio"
id="cjk-heavenly-stem"
name="type"
value="cjk-heavenly-stem" />cjk-heavenly-stem
</label>
<label for="cjk-ideographic">
<input
type="radio"
id="cjk-ideographic"
name="type"
value="cjk-ideographic" />cjk-ideographic
</label>
<label for="devanagari">
<input
type="radio"
id="devanagari"
name="type"
value="devanagari" />devanagari
</label>
<label for="ethiopic-numeric">
<input
type="radio"
id="ethiopic-numeric"
name="type"
value="ethiopic-numeric" />ethiopic-numeric
</label>
<label for="georgian">
<input type="radio" id="georgian" name="type" value="georgian" />georgian
</label>
<label for="gujarati">
<input type="radio" id="gujarati" name="type" value="gujarati" />gujarati
</label>
<label for="gurmukhi">
<input type="radio" id="gurmukhi" name="type" value="gurmukhi" />gurmukhi
</label>
<label for="hebrew">
<input type="radio" id="hebrew" name="type" value="hebrew" />hebrew
</label>
<label for="hiragana">
<input type="radio" id="hiragana" name="type" value="hiragana" />hiragana
</label>
<label for="hiragana-iroha">
<input
type="radio"
id="hiragana-iroha"
name="type"
value="hiragana-iroha" />hiragana-iroha
</label>
<label for="japanese-formal">
<input
type="radio"
id="japanese-formal"
name="type"
value="japanese-formal" />japanese-formal
</label>
<label for="japanese-informal">
<input
type="radio"
id="japanese-informal"
name="type"
value="japanese-informal" />japanese-informal
</label>
<label for="kannada">
<input type="radio" id="kannada" name="type" value="kannada" />kannada
</label>
<label for="katakana">
<input type="radio" id="katakana" name="type" value="katakana" />katakana
</label>
<label for="katakana-iroha">
<input
type="radio"
id="katakana-iroha"
name="type"
value="katakana-iroha" />katakana-iroha
</label>
<label for="khmer">
<input type="radio" id="khmer" name="type" value="khmer" />khmer
</label>
<label for="korean-hangul-formal">
<input
type="radio"
id="korean-hangul-formal"
name="type"
value="korean-hangul-formal" />korean-hangul-formal
</label>
<label for="korean-hanja-formal">
<input
type="radio"
id="korean-hanja-formal"
name="type"
value="korean-hanja-formal" />korean-hanja-formal
</label>
<label for="korean-hanja-informal">
<input
type="radio"
id="korean-hanja-informal"
name="type"
value="korean-hanja-informal" />korean-hanja-informal
</label>
<label for="lao">
<input type="radio" id="lao" name="type" value="lao" />lao
</label>
<label for="lower-armenian">
<input
type="radio"
id="lower-armenian"
name="type"
value="lower-armenian" />lower-armenian
</label>
<label for="malayalam">
<input type="radio" id="malayalam" name="type" value="malayalam" />malayalam
</label>
<label for="mongolian">
<input type="radio" id="mongolian" name="type" value="mongolian" />mongolian
</label>
<label for="myanmar">
<input type="radio" id="myanmar" name="type" value="myanmar" />myanmar
</label>
<label for="oriya">
<input type="radio" id="oriya" name="type" value="oriya" />oriya
</label>
<label for="persian">
<input type="radio" id="persian" name="type" value="persian" />persian
</label>
<label for="simp-chinese-formal">
<input
type="radio"
id="simp-chinese-formal"
name="type"
value="simp-chinese-formal" />simp-chinese-formal
</label>
<label for="simp-chinese-informal">
<input
type="radio"
id="simp-chinese-informal"
name="type"
value="simp-chinese-informal" />simp-chinese-informal
</label>
<label for="tamil">
<input type="radio" id="tamil" name="type" value="tamil" />tamil
</label>
<label for="telugu">
<input type="radio" id="telugu" name="type" value="telugu" />telugu
</label>
<label for="thai">
<input type="radio" id="thai" name="type" value="thai" />thai
</label>
<label for="tibetan">
<input type="radio" id="tibetan" name="type" value="tibetan" />tibetan
</label>
<label for="trad-chinese-formal">
<input
type="radio"
id="trad-chinese-formal"
name="type"
value="trad-chinese-formal" />trad-chinese-formal
</label>
<label for="trad-chinese-informal">
<input
type="radio"
id="trad-chinese-informal"
name="type"
value="trad-chinese-informal" />trad-chinese-informal
</label>
<label for="upper-armenian">
<input
type="radio"
id="upper-armenian"
name="type"
value="upper-armenian" />upper-armenian
</label>
<label for="disclosure-open">
<input
type="radio"
id="disclosure-open"
name="type"
value="disclosure-open" />disclosure-open
</label>
<label for="disclosure-closed">
<input
type="radio"
id="disclosure-closed"
name="type"
value="disclosure-closed" />disclosure-closed
</label>
<label for="-moz-ethiopic-halehame">
<input
type="radio"
id="-moz-ethiopic-halehame"
name="type"
value="-moz-ethiopic-halehame" />-moz-ethiopic-halehame
</label>
<label for="-moz-ethiopic-halehame-am">
<input
type="radio"
id="-moz-ethiopic-halehame-am"
name="type"
value="-moz-ethiopic-halehame-am" />-moz-ethiopic-halehame-am
</label>
<label for="ethiopic-halehame-ti-er">
<input
type="radio"
id="ethiopic-halehame-ti-er"
name="type"
value="ethiopic-halehame-ti-er" />ethiopic-halehame-ti-er
</label>
<label for="ethiopic-halehame-ti-et">
<input
type="radio"
id="ethiopic-halehame-ti-et"
name="type"
value="ethiopic-halehame-ti-et" />ethiopic-halehame-ti-et
</label>
<label for="hangul">
<input type="radio" id="hangul" name="type" value="hangul" />hangul
</label>
<label for="hangul-consonant">
<input
type="radio"
id="hangul-consonant"
name="type"
value="hangul-consonant" />hangul-consonant
</label>
<label for="urdu">
<input type="radio" id="urdu" name="type" value="urdu" />urdu
</label>
<label for="-moz-ethiopic-halehame-ti-er">
<input
type="radio"
id="-moz-ethiopic-halehame-ti-er"
name="type"
value="-moz-ethiopic-halehame-ti-er" />-moz-ethiopic-halehame-ti-er
</label>
<label for="-moz-ethiopic-halehame-ti-et">
<input
type="radio"
id="-moz-ethiopic-halehame-ti-et"
name="type"
value="-moz-ethiopic-halehame-ti-et" />-moz-ethiopic-halehame-ti-et
</label>
<label for="-moz-hangul">
<input
type="radio"
id="-moz-hangul"
name="type"
value="-moz-hangul" />-moz-hangul
</label>
<label for="-moz-hangul-consonant">
<input
type="radio"
id="-moz-hangul-consonant"
name="type"
value="-moz-hangul-consonant" />-moz-hangul-consonant
</label>
<label for="-moz-urdu">
<input type="radio" id="-moz-urdu" name="type" value="-moz-urdu" />-moz-urdu
</label>
</div>
CSS
ol {
font-size: 1.2rem;
}
.container {
column-count: 3;
}
label {
display: block;
}
input {
margin: 0.4rem;
}
JavaScript
const container = document.querySelector(".container");
container.addEventListener("change", (event) => {
const list = document.querySelector("ol");
list.setAttribute("style", `list-style-type: ${event.target.value}`);
});
结果
我们不仅限于此页面或规范中定义的列表样式类型。@counter-style
规则允许使用任何字母创建计数器。
规范
规范 |
---|
CSS 列表和计数器模块级别 3 # text-markers |
CSS 计数器样式级别 3 # extending-css2 |
浏览器兼容性
BCD 表仅在浏览器中加载
另请参阅
list-style
简写属性list-style-image
属性list-style-position
属性::marker
伪元素- CSS 列表和计数器模块
- CSS 计数器样式模块