聊聊 CSS 的 ::marker

作者：System 时间：2024年08月07日分类：所有,css 字数：428

::marker 是一个伪元素，用于选择列表项（如 <ul> 或 <ol> 中的 <li> 元素）的标记。在大多数浏览器中，标记通常是项目符号（例如圆点或数字），但在一些CSS定义的列表中，标记可能是空的或由其他内容组成。

::marker 伪元素可以用来为这些标记添加样式，而不改变列表中项目的内容。

例如，如果你想要更改无序列表的项目符号样式，可以使用以下CSS代码：




ul li::marker {
  color: blue;
  font-size: 20px;
}

如果你想要更改有序列表的项目编号样式，可以使用以下CSS代码：




ol li::marker {
  color: red;
  font-weight: bold;
}

请注意，::marker 目前的支持情况相对较新，因此请在使用时确保浏览器兼容性。