CSS list-style-type 属性

关于有序列表type 属性兼容，CSS的list-style-type属性样式可以解决有序列表<ol> 元素的 type 属性兼容问题。

有序列表的项目符号的类型，包括1，A，a，I，i，常用的有阿拉伯数字1,2,3，英文字母a,b,c，大写英文字母A,B,C，罗马字母i, ii, iii, iv，大写罗马字母I, II, III, IV

前面说过，尽管不赞成使用 type 属性，不过所有浏览器都支持 type 属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的list-style-type</title>
    <style type="text/css">
        ul.circle {list-style-type:circle}
        ul.square {list-style-type:square}
        ol.upper-roman {list-style-type:upper-roman}
        ol.lower-alpha {list-style-type:lower-alpha}
    </style>
</head>
<body>
<p>Type circle:</p>
<ul class="circle">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

<p>Type square:</p>
<ul class="square">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ul>

<p>Type upper-roman:</p>
<ol class="upper-roman">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>

<p>Type lower-alpha:</p>
<ol class="lower-alpha">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Coca Cola</li>
</ol>
</body>
</html>

通过CSS设置不同的列表样式，从而达到有序列表<ol>的type属性相同的效果。

【有序列表和无序列表均可以应用】

兼容：所有浏览器都支持 list-style-type 属性。

none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

拓展：有序列表<ol>的新属性

<ol> 有序列表

【H5新属性】

①reversed---规定列表顺序为降序。(9,8,7...)

兼容：目前只有 Chrome 和 Safari 6 支持 reversed 属性。

<ol reversed>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

②start---规定有序列表的起始值

兼容：尽管不赞成使用 start 属性，不过所有浏览器都支持 start 属性。注释：目前，仍然没有 start 属性的 CSS 替代方案。

<ol start="5" reversed>
    <li>HTML</li>
    <li>XHTML</li>
    <li>CSS</li>
</ol>

③type----规定有序列表的项目符号的类型，包括1，A，a，I，i

注意：尽管不赞成使用 type 属性，不过所有浏览器都支持 type 属性

<ol type="I">
   <li>HTML</li>
   <li>XHTML</li>
   <li>CSS</li>
</ol>

CSS list-style-type 属性

相关推荐