• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • list-style-type

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

    示例

    /* 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;
    
    /*  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: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持list-style-type

    语法:

    list-style-type<custom-ident>| symbols()| <string>| disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

    取值:

    • <custom-ident>:与@counter样式或预定义样式之一的值匹配的标识符。参见<custom-ident>
    • symbols():定义列表的匿名样式
    • <string>:指定的字符串将用作项的标记。
    • none:不显示列表项的标记。

    关键字的取值是下列之一:

    效果取值含义
    • 第一行
    • 第二行
    disc实心圆
    • 第一行
    • 第二行
    circle空心圆
    • 第一行
    • 第二行
    square实心方块
    • 第一行
    • 第二行
    decimal阿拉伯数字
    • 第一行
    • 第二行
    cjk-decimal中日韩十进制数例如:一,二,三,...,九八,九九,一〇〇
    • 第一行
    • 第二行
    decimal-leading-zero十进制数。由初始零填充。例如01, 02, 03,… 98, 99
    • 第一行
    • 第二行
    lower-roman小写罗马数字
    • 第一行
    • 第二行
    upper-roman大写罗马数字
    • 第一行
    • 第二行
    lower-alpha小写英文字母
    • 第一行
    • 第二行
    upper-alpha大写英文字母
    • 第一行
    • 第二行
    armenian传统的亚美尼亚数字
    • 第一行
    • 第二行
    cjk-ideographic浅白的表意数字
    • 第一行
    • 第二行
    georgian传统的乔治数字
    • 第一行
    • 第二行
    lower-greek基本的希腊小写字母
    • 第一行
    • 第二行
    hebrew传统的希伯莱数字
    • 第一行
    • 第二行
    hiragana日文平假名字符
    • 第一行
    • 第二行
    hiragana-iroha日文平假名序号
    • 第一行
    • 第二行
    katakana日文片假名字符
    • 第一行
    • 第二行
    lower-alpha
    lower-latin
    小写拉丁字母
    • 第一行
    • 第二行
    upper-alpha
    upper-latin
    大写拉丁字母

    说明:

    设置或检索对象的列表项所使用的预设标记。

    • list-style-image属性为none或指定图像不可用时,list-style-type属性将发生作用。
    • 仅作用于具有display:list-item的对象(如li对象)。
    • 注意:ol对象和ul对象的type特性为其后的所有列表项目(如li对象)指明列表属性。
    • 对应的脚本特性为listStyleType
    默认值disc
    适用于所有display:list-item的元素
    继承性
    动画性
    计算值特定值

    实例

    <style>
    ol.normal {
      list-style-type: upper-alpha;
    }
    
    /* or use the shortcut "list-style": */
    ol.shortcut {
      list-style: upper-alpha;
    }
    </style>
    
    <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>