)
::marker CSS伪元素允许您为列表的标记（项目符号或数字）设置样式，而不影响列表项的内容。
本章概述
::marker伪元素是CSS中一个专门用于样式化列表标记的强大工具。它让我们能够直接控制列表项目符号或数字的外观，包括颜色、字体、大小甚至自定义内容。这个伪元素为创建美观、个性化的列表提供了简洁而有效的解决方案。
学习目标
理解::marker伪元素的基本概念和作用
掌握::marker支持的CSS属性和限制
学会创建自定义的列表标记样式
了解在有序列表和无序列表中的不同应用
掌握与计数器结合使用的高级技巧
学会处理浏览器兼容性和降级方案
掌握创建动态和交互式列表标记
::marker伪元素基础
基本语法
/* 基本语法 */ li::marker { color: #007bff; font-size: 1.2em; } /* 针对特定列表 */ .custom-list li::marker { color: #28a745; font-weight: bold; } /* 有序列表标记 */ ol li::marker { color: #dc3545; font-family: 'Georgia', serif; } /* 无序列表标记 */ ul li::marker { color: #6f42c1; font-size: 1.5em; }核心概念
选择器特异性: ::marker只能应用于具有
display: list-item的元素属性限制: 只支持特定的CSS属性，主要是字体、颜色和内容相关
内容自定义: 可以使用
content属性完全自定义标记内容计数器集成: 与CSS计数器完美配合，创建复杂的编号系统
🎨 基础应用示例
简单的颜色和字体样式
/* 基础颜色样式 */ .colored-list li::marker { color: #007bff; font-weight: bold; } /* 不同大小的标记 */ .large-markers li::marker { font-size: 1.5em; color: #28a745; } .small-markers li::marker { font-size: 0.8em; color: #6c757d; } /* 字体样式变化 */ .serif-markers li::marker { font-family: 'Georgia', serif; font-style: italic; color: #495057; } .mono-markers li::marker { font-family: 'Courier New', monospace; font-weight: bold; color: #6f42c1; }彩虹色标记
/* 彩虹色列表标记 */ .rainbow-list li:nth-child(1)::marker { color: #ef476f; } .rainbow-list li:nth-child(2)::marker { color: #ffd166; } .rainbow-list li:nth-child(3)::marker { color: #06d6a0; } .rainbow-list li:nth-child(4)::marker { color: #118ab2;)
