list-style

Avatar of Sara Cope
Sara Cope

DigitalOcean 为您的旅程的每个阶段提供云产品。立即开始,获得 200 美元的免费赠金!

list-style 属性是一个简写属性,可以在一个声明中设置三个不同列表相关属性的值

ul {
  list-style: <list-style-type> || <list-style-position> || <list-style-image>;
}

以下是语法示例

ul {
  list-style: square outside none;
}

这与以下的完整版本相同

ul {
  list-style-type: square;
  list-style-position: outside;
  list-style-image: none;
}

在简写中,如果省略任何值,它们将恢复到初始状态。

list-style-type 的值

list-style-type 属性通过设置列表中每个标记或项目符号的内容来定义列表的类型。 list-style-type 的可接受关键字值包括

  • disc(实心圆)
  • circle(空心圆)
  • square(正方形)
  • decimal(阿拉伯数字)
  • decimal-leading-zero(带前导零的阿拉伯数字)
  • lower-roman(小写罗马数字)
  • upper-roman(大写罗马数字)
  • lower-greek(小写希腊字母)
  • lower-latin(小写拉丁字母)
  • upper-latin(大写拉丁字母)
  • armenian(亚美尼亚数字)
  • georgian(格鲁吉亚数字)
  • lower-alpha(小写字母)
  • upper-alpha(大写字母)
  • none(无)

MDN 更完整的列表。非关键字值 在 CSS3 中引入,并且开始得到一些支持,例如

ul {
  list-style-type: "→";
}

以下演示包含一组无序列表,以演示每个关键字值

list-style-type 属性适用于所有列表,以及设置为 display: list-item 的任何元素。

列表标记的颜色将是元素的计算颜色(通过 color 属性设置)。

list-style-position 的值

list-style-position 属性定义列表标记的位置,它接受两个值之一:insideoutside。 这些值在下面通过从列表中移除 padding 并添加左侧红色边框来演示

list-style-image 的值

list-style-image 属性确定列表标记是否设置为图像,并接受“none”或指向图像的 URL 的值

ul {
  list-style-image: url(images/bullet.png);
}

更多演示

浏览器支持

IEEdgeFirefoxChromeSafariOpera
有效有效
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
有效
来源:caniuse

Internet Explorer 6 和 7 不支持 list-style-type 的所有关键字值,并且还有一个错误,即浮动列表项不显示其列表标记。 这可以通过在列表项上使用背景图像(而不是 list-style-image)来解决。

更多信息