CSS::marker 自定义点和数字的某些样式

terry 2年前 (2023-09-27) 阅读数 63 #数据结构与算法

使用

或 键自定义数字或点的颜色、大小或类型。很简单。

感谢CSS ::marker我们可以更改内容以及一些项目符号和数字样式。

浏览器兼容性

当 Chromium 86 发布时，::marker 桌面版和 Android 版 Firefox、桌面版 Safari 和 Chromium Safari、桌面版 iOS Safari 将在 MDN 的浏览器兼容性矩阵上获得更新支持。

伪元素

考虑以下简单的 HTML 无序列表：

<ul>
  <li>深网｜美团的头号创业项目：王兴发话“这场仗一定要打赢”</li>
  <li>外媒：华为受美国制裁出现转折，美国或允许部分公司提供非5G零件</li>
  <li>iPhone12不到一周就破发 经销商：办5G套餐能降1300多元</li>
  <li>威马汽车自燃事件续：官方承认缺陷电池并召回，占总销量3.6％</li>
  <li>iPhone 背后的浓浓塑料情：富士康薅苹果羊毛，库克偷偷找备胎</li>
</ul>
复制代码

我们知道它将像这样渲染

每个 点都以开头。

今天我们很高兴谈论伪元素::marker，浏览器样式为您创建的点元素创建。

关键术语：伪元素表示不在文档树中的文档元素。例如，您可以使用伪元素 p::first-line 选择段落的第一行，即使该行文本不会破坏 HTML 元素。

`在每个列表项元素内自动生成的 ::marker 伪元素标记框中创建标记`

，位于实际内容和 eee.: 之前。

li::before {
  content: "::before";
  background: lightgray;
  border-radius: 1ch;
  padding-inline: 1ch;
  margin-inline-end: 1ch;
}
复制代码

列表项通常是

 HTML 元素，但其他元素也可以通过 display:list-item 成为列表项。 
<dl>
  <dt>深网｜美团的头号创业项目：王兴发话“这场仗一定要打赢”</dt>
  <dd>L外媒：华为受美国制裁出现转折，美国或允许部分公司提供非5G零件</dd>
  <dd>iPhone12不到一周就破发 经销商：办5G套餐能降1300多元</dd>

  <dt>威马汽车自燃事件续：官方承认缺陷电池并召回，占总销量3.6％</dt>
  <dd>iPhone 背后的浓浓塑料情：富士康薅苹果羊毛，库克偷偷找备胎</dd>
</dl>
复制代码
dd {
  display: list-item;
  list-style-type: "?";
  padding-inline-start: 1ch;
}
复制代码
标记样式
 在使用::marker之前，可以使用list-style-type和创建列表。  仅使用一行 CSS 即可更改列表项符号。 li {
  list-style-image: url(/right-arrow.svg);
  /* OR */
  list-style-type: '?';
  padding-inline-start: 1ch;
}
复制代码
很方便，但我们还需要更多。更改颜色、大小、间距等等！这就是 ::marker 的用武之地，它允许这些伪元素独立于 CSS 或全局定位。 
li::marker {
  color: hotpink;
}

li:first-child::marker {
  font-size: 5rem;
}
复制代码
警告：如果上面的列表中没有粉红点，则您的浏览器不支持::marker。
list-style-type 属性提供非常有限的样式选项。 ::marker 伪元素意味着您可以定位标记本身并直接对其应用样式，从而实现更多控制。 
这意味着 ::marker 无法使用所有 CSS 属性。规范中明确规定了允许和禁止的属性列表。如果您尝试使用此伪元素进行一些有趣的操作但不起作用，下面的列表提供了有关 CSS 允许和不允许的内容的指导。做。 
 允许的 CSS::标记属性 
动画-*
过渡-*
颜色
方向
字体-*
字体-*
竞价时-*❙ ni it - space
List ::marker 内容可以通过 content 更改，而不是

♹♹ 类型。在以下示例中，第一个项目的样式为 list-style-type，第二个项目的样式为 ::marker。在第一种情况下，属性适用于整个列表项，而不仅仅是标记，这意味着文本和标记都是动画的。当使用 ::marker 时，我们只能定位标记框而不是文本。

另请注意，禁用的属性不会影响背景。

列表样式

li:nth-child(1) {
  list-style-type: '?';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
复制代码

标记样式

li:nth-child(2)::marker {
  content: '!';
  font-size: 2rem;
  background: hsl(200 20% 88%);
  animation: color-change 3s ease-in-out infinite;
}
复制代码

更改标记内容

以下是设置标记样式的一些方法。

编辑所有列表项

li {
  list-style-type: "?";
}

/* OR */

li::marker {
  content: "?";
}
复制代码

仅编辑一项列表项

li:last-child::marker {
  content: "?";
}
复制代码

将列表项编辑为 SVG

li::marker {
  content: url(/heart.svg);
  content: url(#heart);
  content: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z' fill='none' stroke='hotpink' stroke-width='3'/></svg>");
}
复制代码

编辑编号列表

但是 ♷❀> 默认情况下，有序列表项的标记是数字点。在CSS中，这些函数被称为计数器，它们的功能非常强大。它们甚至具有设置和重置数字开头和结尾或交换罗马数字的属性。我们可以设计它吗？是的，我们甚至可以使用标记的内容值来创建我们自己的编号表示。

li::marker {
  content: counter(list-item) "› "; 
  color: hotpink;
}
复制代码

调试

Chrome DevTools 已准备好帮助您检查、调试和修改应用于 ::marker 伪元素的样式。

未来的伪元素样式

了解有关::marker的更多信息，请访问：

来自 Smass 和计数器、Countering 的 CSS 列表♿来自 CSS-Tricks 的 CSS 计数器和 CSS 网格
使用MDN 的 CSS 计数器

能够访问一直难以设计样式的东西真是太好了。您可能想要设置其他自动生成的元素的样式。您可能会对或在不同浏览器中实现不同的搜索输入自动完成指示器感到沮丧。

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：CSS Selector的级联、优先级、冲突、继承以及属性值计算流程下一篇：网站布局：12列网格布局

CSS::marker 自定义点和数字的某些样式

浏览器兼容性

伪元素

在每个列表项元素内自动生成的 ::marker 伪元素标记框中创建标记

标记样式

允许的 CSS::标记属性

更改标记内容

调试

未来的伪元素样式

版权声明

作者文章

`在每个列表项元素内自动生成的 ::marker 伪元素标记框中创建标记`