列表

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>

列表样式

浏览器支持

  • 1
  • 12
  • 1
  • 1

来源

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

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

list-style-position

借助 list-style-position，您可以将项目符号移动到列表项内容的 inside 或 outside 位置。默认 outside 表示项目符号不包含在列表项内容中，而 inside 会在列表项内容中移动第一个元素。

包含外部和内部 ::marker 的列表，显示外部（默认值）不在列表项内，而是在列表项内容框中。

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 标记元素是项目符号、连字符或罗马数字，有助于表示列表中的每项内容。

一个列表，包含三个项目，表明每个项目符号都是 ::marker 伪元素。

如果在开发者工具中检查列表，您会看到每个列表项都有一个 ::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> 创建列表。

检查您的掌握程度

测试您对列表相关知识的掌握情况

列表项前面的元素称为

::项目符号
请重试。
::铅笔
请重试。
::标记
正确！
::计数器
请重试。

HTML 列表有三种类型

<dl>
正确！
<lo>
请重试。
<ol>
正确！
<li>
请重试。
<ul>
正确！
<list>
请重试。

此列表中的哪两种样式会将样式应用到 ::标记？

transition
正确！
background-color
请重试。
color
正确！
display
请重试。

资源