列表

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>

列表样式

浏览器支持

  • 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。如果您想在标题上添加一个悬挂的项目符号，以便使用 ::marker 将其更改为其他内容，就可以使用 display: list-item。以下示例展示了使用 display: list-item 来设置样式的标题，以及使用正确列表标记的列表。

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

检查您的掌握程度

考考你对列表的掌握情况

列表项前面的元素称为

::bullet
请重试。
::pencil
请重试。
::marker
正确！
::counter
请重试。

HTML 列表有三种类型，

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

此列表中的哪两种样式会将样式应用于 ::marker？

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

资源