本文详解如何通过组合类选择器与伪元素 ::before 实现列表项（）的条件样式定制，重点纠正 .known li::before 误用导致的样式失效问题，并提供可直接运行的代码示例与关键注意事项。
本文详解如何通过组合类选择器与伪元素 `::before` 实现列表项（`
在 CSS 中，伪元素（如 ::before 和 ::after）必须依附于具体元素才能生效。当您希望为带有特定类（如 class="known"）的 <li> 元素单独设置装饰性内容时，选择器必须精准定位该 <li> 元素本身，而非其父容器。
错误写法 .known li::before 的含义是：「查找所有位于 .known 类元素内部（任意嵌套层级）的 <li> 元素，并为其添加 ::before 伪元素」。这会导致样式完全不作用于 <li class="known">——因为此时 <li> 自身才是目标元素，而非其祖先。
✅ 正确写法是将类名直接附加在元素选择器之后，形成 复合选择器 li.known::before，表示「匹配同时满足 <li> 标签且具有 known 类的所有元素」。
以下是完整、可复用的 CSS 示例：
立即学习“前端免费学习笔记（深入）”；
/* 默认所有 li 的前置符号：4个□ + 白色右箭头 ▷ */
li::before {
content: "\25A2\25A2\25A2\25A2\25B7";
padding-right: 0.5em; /* 推荐添加合理间距，提升可读性 */
font-variant: normal; /* 确保 Unicode 符号正常渲染 */
}
/* 仅对 <li class="known"> 应用：4个□ + 黑色实心右箭头 ▶ */
li.known::before {
content: "\25A2\25A2\25A2\25A2\25B6";
}对应 HTML 结构应保持简洁：
<ul> <li>general data</li> <li class="known">marked data</li> <li>another general item</li> <li class="known">another marked item</li> </ul>
⚠️ 注意事项：
- 使用
::before（双冒号）是现代 CSS 规范写法，兼容所有主流浏览器；单冒号:before为旧语法，虽仍被支持，但建议统一使用双冒号以明确语义。 -
content属性仅在::before和::after中有效，且必须声明（即使为空content: ""），否则伪元素不会渲染。 - 若箭头符号显示异常（如方块或问号），请确认页面
中已声明 UTF-8 编码：<meta charset="UTF-8">。 - 优先级方面：
li.known::before比li::before更具体，因此无需!important即可自然覆盖默认样式。
通过这种结构化选择器设计，您无需手动在 HTML 中重复插入 Unicode 字符，即可实现灵活、可维护、语义清晰的列表项差异化标记。
