list-style

list-style CSS 简写属性 允许您一次设置所有列表样式属性。

试一试

此属性的值将应用于列表项，包括 <li> 元素和具有 display: list-item; 的元素。因为此属性是继承的，所以可以在父元素（通常是 <ol> 或 <ul>）上设置它，以便相同的列表样式应用于所有嵌套项。

组成属性

此属性是以下 CSS 属性的简写

语法

css
/* type */
list-style: square;

/* image */
list-style: url("../img/shape.png");

/* position */
list-style: inside;

/* two values */
list-style: georgian outside;
list-style: url("img/pip.svg") inside;

/* three values */
list-style: lower-roman url("img/shape.png") outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: revert-layer;
list-style: unset;

list-style 属性以任何顺序指定一个、两个或三个值。如果 list-style-type 和 list-style-image 都已设置，则如果图像不可用，则使用 list-style-type 作为后备。

值

list-style-type

一个 <counter-style>、<string> 或 none。如果在简写中省略，则使用默认的 disc 值。见 list-style-type。

list-style-image

一个 <image> 或 none。如果省略，则使用默认的 none 值。见 list-style-image。

list-style-position

inside 或 outside。如果省略，则使用默认的 outside 值。见 list-style-position。

none

不使用列表样式。

正式定义

初始值与简写的每个属性相同
应用于列表项
继承是
计算值与简写的每个属性相同
动画类型与简写的每个属性相同

正式语法

list-style = 
  <'list-style-position'>  ||
  <'list-style-image'>     ||
  <'list-style-type'>      

<list-style-position> = 
  inside   |
  outside  

<list-style-image> = 
  <image>  |
  none     

<list-style-type> = 
  <counter-style>  |
  <string>         |
  none             

<image> = 
  <url>       |
  <gradient>  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<url> = 
  <url()>  |
  <src()>  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

无障碍

Safari 不在无障碍性树中识别有序或无序列表，如果它们的 list-style 值为 none，除非列表嵌套在 <nav> 导航元素中。此 行为是故意的，不应被视为错误。

为了确保列表被宣布为列表，请将 role="list" 添加到 <ol> 和 <ul> 元素，尤其是在列表未嵌套在 <nav> 中时。这在不影响设计的情况下恢复了列表语义

html
<ul role="list">
  <li>An item</li>
  <li>Another item</li>
</ul>

如果 ARIA role 不适合您的代码，则可以使用 CSS 代替。在每个列表项之前添加非空 伪内容（如文本或图像）可以恢复列表语义，但会影响视觉外观。Safari 确定添加的伪内容是否足以作为无障碍内容，如果足够，则恢复列表语义。通常，Safari 认为文本和图像足够，这就是下面显示的 content: "+ "; 工作的原因（但需要额外的样式以不影响设计）。

css
ul {
  list-style: none;
}

ul li::before {
  content: "+ ";
}

content: "";（空字符串）的声明将被忽略，与仅包含空格的 content 值（如 content: " ";）一样。

这些 CSS 权宜之计仅应在 HTML 解决方案不可用时使用，并且仅在测试以确保它们不会导致可能对用户体验产生负面影响的意外行为之后使用。

示例

设置列表样式类型和位置

HTML

html
List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>

CSS

css
.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

结果

规范

规范
CSS 列表和计数器模块级别 3
# list-style-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅