CSS - list-style 属性

CSS list-style 属性是一个速记属性，用于在单个声明中设置所有列表样式属性。

可能的值

以下是可以传递给 list-style 属性的可能值：

list-style-type：设置列表项的标记。
list-style-image：将图像设置为列表项的标记。
list-style-position：设置：：标记相对于列表项的位置。
none：不对列表应用列表样式。

CSS 属性列表样式可以按任何顺序列出一个、两个或三个关键字作为其值。当传递值 list-style-image 和 list-style-type 时，list-style-type 将充当回退选项，以防 list-style-image 不受支持或不可用。

适用于

所有带有 display： list-item 的元素。

DOM 语法


object.style.listStyle = <'list-style-position'> || <'list-style-image'> || <'list-style-type'>

可访问性问题：如果有序或无序列表的列表样式等于无，则 Safari 浏览器无法将其识别为列表。为了解决这种预期行为，您需要将 role=“list” 添加到 <ol> 或 <ul> 元素中。
可访问的伪内容可以恢复列表语义。
空字符串或空格，作为值传递给 content = “” || ”“，将被忽略。
为了在视觉上保持这些标记的隐藏性，您需要将 <image> 应用于列表样式属性。
只有在没有解决方案时才必须使用这些解决方法，并且应彻底检查以避免任何意外行为。

CSS 列表样式 - 简写

下面是一个列表样式的速记 CSS 属性示例：


<html>
<head>
<style>
	 	.circle1 {
	 	 	 list-style: circle filled;
	 	}

	 	.circle2 {
	 	 	 list-style: circle;
	 	}

	 	.square {
	 	 	 list-style: square outside none;
	 	}
</style>
</head>
<body>
	 	<h2>Example - list style shorthand</h2>
	 	<ul class="circle1"><u>List style - circle / filled</u>
	 	 	 <li>First Item</li>
	 	 	 <li>Second Item</li>
	 	 	 <li>Third Item</li>
	 	</ul>

	 	<ul class="circle2"><u>List style - circle</u>
	 	 	 <li>First Item</li>
	 	 	 <li>Second Item</li>
	 	 	 <li>Third Item</li>
	 	</ul>

	 	<ul class="square"><u>List style - square / outside / none</u>
	 	 	 <li>First Item</li>
	 	 	 <li>Second Item</li>
	 	 	 <li>Third Item</li>
	 	</ul> 	
</body>
</html>

下表列出了 list-style 的不同 longhand 属性：

属性	描述
list-style-image	将图像添加为列表项标记。
list-style-position	设置列表标记的位置。
list-style-type	设置列表的标记。

打印本页