CSS 属性

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

属性值

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

  • list-style-type:设置列表项的标记。

  • list-style-image:将图像设置为列表项的标记。

  • list-style-position:设置 ::marker 相对于列表项。

  • none:没有列表样式应用于列表。

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

适用范围

所有显示的元素:list-item。

DOM 语法

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

可访问性问题:有序或无序列表如果列表样式等于 none，则 Safari 浏览器不会将其识别为列表。为了解决此预期行为，您需要将 role="list" 添加到 <ol> 或 <ul> 元素。

可访问的伪内容可以恢复列表语义。

空字符串或空格，作为值传递给 content = "" || " "将被忽略。

为了使这些标记在视觉上隐藏，您需要将 <image> 应用于列表样式属性。

只有在以下情况下才必须使用这些解决方法:没有解决方案，应该彻底检查以避免任何意外行为。

CSS list-style: Shorthand

这是一个列表样式速记 CSS 属性的示例:

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

   .circle2 {
      list-style: circle;
   }

   .square {
      list-style: square outside none;
   }
</style>
</head>
<body>
   <h2>示例: list style 简写</h2>
   <ul class="circle1"><u>List style: 圆形/ 填充</u>
      <li>First Item</li>
      <li>Second Item</li>
      <li>Third Item</li>
   </ul>

   <ul class="circle2"><u>List style: 圆形</u>
      <li>First Item</li>
      <li>Second Item</li>
      <li>Third Item</li>
   </ul>

   <ul class="square"><u>List style: 方形/外部/无</u>
      <li>First Item</li>
      <li>Second Item</li>
      <li>Third Item</li>
   </ul>  
</body>
</html>

下表列出了 list-style 的不同普通属性:

属性说明
list-style-position设置列表标记的位置。
list-style-type设置列表的标记。