mdn-样式列表

处理列表间距

      /* General styles */
      /*设置一个网站字体，基准字体大小为10px*/
      html {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 10px;
      }
      h2 {
        font-size: 2rem;
      }
      /*设置相对字体大小*/
      ul,ol,dl,p {
        font-size: 1.5rem;
      }
      /*段落和列表设置行高*/
      li, p {
        line-height: 1.5;
      }

      /* Unordered list styles */
      /**/
      ul {
        padding-left: 2rem;
        list-style-type: none;
      }

      ul li {
        padding-left: 2rem;
        background-image: url(star.svg);
        background-position: 0 0;
        background-size: 1.6rem 1.6rem;
        background-repeat: no-repeat;
      }

      /* Ordered list styles */

      ol {
        list-style-type: upper-roman;
      }

      /* Description list styles */

      dd, dt {
        line-height: 1.5;
      }
      /*描述术语加粗*/
      dt {
        font-weight: bold;
      }

列表特定样式

符号样式

• list-style-type

1. upper-roman-I,II,III
2. upper-alpha-A,B,C
3. cjk-decimal-一，二，三

项目符号位置

• list-style-position

1. inside 行内
2. outside 行外

自定义项目符号图片

• list-style-image

1. list-style-image: url(star.svg);
2. background-image能得到更好的控制

ul {
  padding-left: 2rem;
  list-style-type: none;//不显示项目符号，用background替代
}

ul li {
  padding-left: 2rem; //默认40px,设置填充，不让重叠
  background-image: url(star.s  vg);
  background-position: 0 0;// 最左上侧
  background-size: 1.6rem 1.6rem;// 设置背景图片的大小
  background-repeat: no-repeat;//不让复制
}

list-style速记

管理列表计数

start

• 从1以外的数字开始计数

reversed

• 列表倒计数

value

• 列表项指定数值