本文介绍在使用 display: list-item 时，如何独立控制标记（如圆点、方块）的颜色，避免影响伪元素或文本颜色，并提供兼容性良好、语义清晰的实现方案。
本文介绍在使用 `display: list-item` 时，如何独立控制标记（如圆点、方块）的颜色，避免影响伪元素或文本颜色，并提供兼容性良好、语义清晰的实现方案。
在 CSS 中，当使用 display: list-item 创建带标记的元素（如圆点 disc 或方块 square）时，标记与内容默认共享同一 color 值——这意味着直接设置 color: red 会同时染红文字和标记，无法单独定制。虽然现代浏览器支持 ::marker 伪元素来精准控制标记样式，但关键限制在于：::marker 不能作用于伪元素（如 ::before 或 ::after）上。因此，若你当前将 display: list-item 应用于 .calendar::before，则 ::marker 将完全失效。
✅ 正确解法是：放弃伪元素，改用真实 HTML 元素（如 <span></span>）承载列表项逻辑，并为其显式应用 ::marker。
以下是推荐实现：
<div class="calendar"> <span class="status">Reserved</span> </div>
.calendar {
display: block;
position: relative;
width: 100px;
aspect-ratio: 1;
background-color: green;
}
.status {
display: list-item;
position: absolute;
bottom: 0;
right: -100%;
color: black; /* 仅影响文字颜色 */
list-style-type: disc; /* 或 square、circle 等 */
}
.status::marker {
color: red; /* ✅ 仅影响标记颜色，与 text-color 完全解耦 */
font-size: 0.9em;
}
? 注意事项与最佳实践：
-
::marker已获 Chrome 89+、Firefox 82+、Safari 15.4+ 原生支持（caniuse.com::marker），旧版浏览器需降级处理（如用list-style-image或绝对定位 SVG）； - 不要对
::before/::after使用display: list-item并期望::marker生效——这是无效组合； - 若需多语言适配，
::marker支持content（如content: "•";）和unicode-bidi等属性，增强可访问性； - 标记颜色建议与背景形成足够对比度（WCAG AA/AAA），尤其用于状态提示类场景（如本例中的“Reserved”）。
通过将语义结构从伪元素迁移至真实 DOM 节点，我们不仅解锁了 ::marker 的精细控制能力，也提升了代码可维护性与可访问性——这才是现代 CSS 列表样式的专业实践路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
