列表

使用集合保持井井有条 根据您的偏好保存内容并进行分类。

CSS 播客 - 030：列表

假设您有一堆计划在下次购物时购买的商品。一种常见的可视化表示方式是列表，但如何为您的购物清单添加样式呢？

<ul>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ul>

创建列表

前面的列表以语义元素 <ul> 开头，其中包含购物清单项（<li> 元素）作为子元素。如果您检查每个 <li> 元素，您可以看到它们都具有 display: list-item，这就是浏览器默认渲染 ::marker 的原因。

li {
  display: list-item;
}

还有其他两种类型的列表。

可以使用 <ol> 创建有序列表，在这种情况下，list-item 将显示一个数字作为 ::marker。

<ol>
  <li>oat milk</li>
  <li>rhubarb</li>
  <li>cereal</li>
  <li>pie crust</li>
</ol>

描述列表是使用 <dl> 创建的，但是这种列表类型不使用 <li> 列表项元素。

<dl>
  <dt>oat milk</dt>
  <dd>- non dairy trendy drink</dd>
  <dt>cereal</dt>
  <dd>- breakfast food</dd>
</dl>

列表样式

现在您已经知道如何创建列表，您可以为其设置样式。首先要了解的 CSS 属性是应用于整个列表的属性。

您可以使用三个 list-style 属性来设置示例的样式：list-style-position、list-style-image 和 list-style-type。

list-style-position

list-style-position 允许您将项目符号移动到 inside 或 outside list-item 的内容之外。默认的 outside 表示项目符号不包含在列表项的内容中，而 inside 会将第一个元素移动到列表项的内容中。

list-style-image

list-style-image 允许您用图像替换列表的项目符号。这使您可以设置图像（例如 url）或 none），使项目符号成为图像、svg 甚至 gif。您还可以使用任何媒体类型，甚至可以使用数据 URI。

让我们看看如何将每个购物商品的图像添加为 list-style-image

list-style-type

最后一个选项是设置 list-style-type 的样式，它会将项目符号更改为已知的样式关键字、自定义字符串、表情符号等。您可以在此处查看所有可能的列表样式类型。

list-style 简写

现在您已经拥有所有这些单独的属性，您可以使用 list-style 简写在一行中设置所有列表样式

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

list-style 允许您以任意顺序声明 list-style 属性中的一个、两个或三个的组合。如果同时设置了 list-style-type 和 list-style-image，则当图像不可用时，list-style-type 将用作后备。

/* type */
list-style: square;

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

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
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: unset;

这是本节介绍的列表样式中最常用的属性。一种常见的应用是 list-style: none 以隐藏默认样式。默认样式来自浏览器，您经常会看到重置样式表删除列表样式，如内边距和外边距。您还可以使用此简写来设置样式，例如 list-style: square inside;

到目前为止，示例都集中在设置整个列表和列表项的样式上，但更细粒度的方法呢？

::marker 伪元素

list-item 标记元素是项目符号、连字符或罗马数字，用于指示列表中的每个项目。

如果您在 DevTools 中检查列表，您可以看到每个列表项都有一个 ::marker 元素，尽管 HTML 中没有声明任何元素。如果您进一步检查 ::marker，您将看到浏览器的默认样式。

::marker {
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    text-transform: none;
    text-indent: 0px !important;
    text-align: start !important;
    text-align-last: start !important;
}

当您声明列表时，每个项目都会被赋予一个标记，即使您的 HTML 中没有项目符号或罗马数字。这是一个伪元素，因为浏览器为您生成它，并提供有限的样式 API 来定位它。详细了解 CSS 项目符号的结构。 ::marker 在 Safari 中支持有限。

标记框

在 CSS 布局模型中，列表项标记由与每个列表项关联的标记框表示。标记框是通常包含项目符号或数字的容器。

要设置标记框的样式，您可以使用 ::marker 选择器。这允许您仅选择标记，而不是基于整个列表设置样式。

标记样式

现在您已经选择了标记，让我们看一下此选择器可用的样式属性。您可以在 web.dev 上了解有关 使用 CSS ::marker 自定义项目符号的更多信息。

有相当多的允许的 CSS ::marker 属性

• animation-*
• transition-*
• color
• direction
• font-*
• content
• unicode-bidi
• white-space

显示类型

我们所有的 list-style 和 ::marker 属性都知道为 <li> 元素设置样式，因为它们具有 list-item 的默认显示值。您还可以将不是 <li> 的内容变成列表项。

您可以通过添加属性 display: list-item 来实现这一点。使用 display: list-item 的一个示例是，如果您希望标题上有一个悬挂的项目符号，以便您可以使用 ::marker 将其更改为其他内容。以下示例显示了使用 display: list-item 进行样式设置的标题，以及使用正确列表标记的列表。

虽然您可以使用 display 将任何内容变成列表项视图，但如果您的内容确实是列表，则不应使用此方法来代替使用正确的列表标记。将项目的外观更改为列表项不会更改辅助功能服务读取和识别项目的方式，因此屏幕阅读器或切换设备不会将其读取为列表项。您应始终使用语义标记，并在可能的情况下始终使用 <li> 创建列表。

检查您的理解情况

测试您对列表的了解

资源

• MDN 列表样式指南
• 使用 CSS ::marker 自定义项目符号
• Smashing Magazine：CSS 列表、标记和计数器
• MDN 使用 CSS 计数器
• CSS 列表和计数器模块级别 3
• CSS-Tricks：使用 CSS 计数器和 CSS Grid 进行计数