list-style-type

list-style-type CSS 属性设置列表项元素的标记(例如圆点、字符或自定义计数器样式)。

试一试

标记将为 currentcolor,与应用于它的元素的计算 color 相同。

只有少数元素(<li><summary>)的默认值为 display: list-item。但是,list-style-type 属性可以应用于任何 display 值设置为 list-item 的元素。此外,由于此属性是继承的,因此可以在父元素(通常为 <ol><ul>)上设置它,以使其应用于所有列表项。

语法

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-ideographictrad-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

正式定义

初始值disc
应用于列表项
继承
计算值按指定
动画类型离散

正式语法

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

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

css
ol.normal {
  list-style-type: upper-alpha;
}

/* or use the shortcut "list-style": */
ol.shortcut {
  list-style: upper-alpha;
}

结果

所有列表样式类型

HTML

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

css
ol {
  font-size: 1.2rem;
}

.container {
  column-count: 3;
}

label {
  display: block;
}

input {
  margin: 0.4rem;
}

JavaScript

js
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 表仅在浏览器中加载

另请参阅