18.::marker伪元素 (::marker Pseudo-Element)

::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;