列表标记和字符串样式

列表——我们都以某种形式使用过它们。 我指的是 HTML 的 <ol> 和 <ul>。 大多数情况下，因为我们希望控制样式，所以我们使用 list-style-type: none 完全关闭列表的标记，并从那里开始样式设置。 其他时候，我们从非常有限的无序列表标记集中进行选择，例如 disc、circle 或 square；或者更广泛的有序列表标记范围。（很多）我们甚至可能偶尔提供要使用的图像的 URL。

但是，如果我们想将标记的样式设置得与列表项内容不同怎么办？ 这在最好的情况下也一直很困难。 现在，由于 ::marker 伪元素，它变得容易多了。 您无法将 CSS 的全部范围应用于标记，但仍然可以完成很多事情。

::marker 在 Firefox 和 Chrome 中可用，这要归功于 Igalia 的工作。

考虑以下列表

默认情况下，这将生成一个从 1 到 5 编号的有序列表，使用阿拉伯数字（1、2、3 等），每个数字后面跟着一个点（句点），所有这些都将与文本内容的字体、大小、样式、颜色等匹配。

如果您有一个设计方向，要求使数字更小或颜色不同，则必须通过抑制标记并使用 ::before 伪元素和 CSS 计数器 以及负文本缩进等手动创建此效果……好吧，需要科学家来解释所有这些。

输入 ::marker。 将这些样式添加到上面的列表中，您将获得后续显示的结果。

这就是您需要做的全部！

但是，在您开始修改所有 CSS 之前，请注意：目前您可以通过 ::marker 应用的属性非常有限。 截至 2021 年 2 月，标记应识别的属性为

• 所有字体属性（font-face、font-size 等）
• white-space 属性
• color 属性
• 国际化属性 text-combine-upright、unicode-bidi 和 direction
• content 属性
• 所有动画和过渡属性

某些浏览器中有一些新增功能，但几乎所有新增功能都与文本样式有关，而不是盒模型。 因此，如果您认为可以将所有列表编号放入带有阴影背景的圆圈中，::marker 将无法实现您的目标——您必须返回到 ::before 生成内容的修补程序。 至少目前是这样：规范 明确指出 未来可能会允许更多属性用于 ::marker。

white-space 周围也存在限制，它在不同的浏览器中存在渲染错误。 例如，Chrome 会将标记中的所有空格视为 white-space: pre（如规范中所述），但不会让您更改它。 当 Chrome 的 LayoutNG（下一代）发布时，此问题应该会得到修复，但在此之前不会修复。 另一方面，Firefox 会忽略任何 white-space 值，并默认将空格视为普通流文本。

考虑到这些限制，您仍然可以使用 content 属性来增强标记。 您可以使用计数器和字符串的组合，将数字括在括号中，而不是后面跟着句点的数字。

请注意 content 值中结束括号后的空格。 它包含在内是为了在标记和列表内容之间提供一些间距。 通常您可能会考虑使用标记或填充，但如前所述，这些属性无法与 ::marker 一起应用。 这很令人沮丧！ 还要注意 CSS 计数器 list-item。 它在 CSS 中的任何其他地方都没有定义——它是一个内置计数器，所有浏览器（理解 CSS 计数器的浏览器）都使用它来计算列表项，例如有序列表中的列表项。 您也可以在 CSS 中使用它！

如果您只想更改列表标记的文本内容，并且不关心更改其任何样式，则可以使用 ::marker，或者可以使用 list-style-type 属性上字符串值的新跨浏览器支持来实现。

li.warning {
  list-style-type:"⚠";
}

这就是列表标记领域的新内容。 它可能不是您经常需要做的事情，但如果您确实需要，那么了解该领域的 capabilities 已有所提高，并且将来可能会变得更好，这一点非常重要。 如果您想出了一些巧妙的标记，请告诉我们！