列表

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> 创建有序列表，在这种情况下，列表项会将数字显示为 ::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-position、list-style-image 和 list-style-type。

list-style-position

借助 list-style-position，您可以将项目符号移动到 inside 或 outside 列表项的内容。默认的 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 可让您以任意顺序声明 1 个、2 个或 3 个 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 标记元素是项目符号、连字符或罗马数字，有助于指示列表中的每一项。

如果您在开发者工具中检查列表，则可以看到每个列表项的 ::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 选择器。这样，您就可以只选择标记，而不是根据整个列表进行样式设置。

标记样式

现在您已经选择了标记，我们来看一看此选择器可用的样式属性。如需详细了解使用 CSS ::marker 的自定义项目符号，请访问 web.dev。

有以下几个允许的 CSS ::marker 属性：

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

屏幕类型

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

为此，您可以添加 display: list-item 属性。例如，如果您想在标题上添加悬挂式项目符号，以便使用 ::marker 将其更改为其他内容，则可以使用 display: list-item。以下示例展示了使用 display: list-item 进行样式设置的标题，以及使用正确列表标记的列表。

虽然您可以使用 display 将任何内容转换为列表项视图，但如果您正在设置样式的内容确实是一个列表，则您不应使用此参数，而是使用正确的列表标记。将某项的视觉外观更改为列表项不会改变无障碍服务读取和识别该项的方式，因此屏幕阅读器或切换设备时，系统不会将其作为列表项读出。您应始终使用语义标记并尽可能使用 <li> 创建列表。

检查您的理解情况

测试您对列表的掌握情况

资源

• 有关样式列表的 MDN 指南
• 使用 CSS ::marker 自定义项目符号
• Smashing Magazine：CSS 列表、标记和计数器
• 使用 CSS 计数器的 MDN
• CSS 列表和计数器模块级别 3
• CSS 技巧：使用 CSS 计数器和 CSS 网格进行计数