本文讲解如何通过正确的 CSS 选择器语法（如 li.known::before）为特定类的 元素单独定制伪元素内容，避免因选择器层级误解导致样式失效。
本文讲解如何通过正确的 css 选择器语法（如 li.known::before）为特定类的 <li> 元素单独定制伪元素内容，避免因选择器层级误解导致样式失效。
在 CSS 中，伪元素（如 ::before）常用于自定义列表项前缀、图标或装饰性符号。你希望默认所有 <li> 显示四格加白色右箭头（▢▢▢▢▷），而带有 class="known" 的 <li> 则显示相同四格但配黑色右箭头（▢▢▢▢▶）。关键在于选择器的书写逻辑必须精准匹配目标元素本身，而非其祖先。
错误写法 .known li::before 表示：查找任何拥有 known 类的父元素内部的所有 <li> 子元素（即后代选择器）。但你的 HTML 中 class="known" 是直接加在 <li> 上的，因此该选择器根本不会命中。
✅ 正确写法是 li.known::before —— 这是一个复合类选择器，表示“同时满足是 <li> 标签且具有 known 类”的元素。它与 li::before 形成层叠关系，后者定义通用样式，前者覆盖特定项：
li::before {
content: "\25A2\25A2\25A2\25A2\25B7"; /* ▢▢▢▢▷ */
padding-right: 0;
}
li.known::before {
content: "\25A2\25A2\25A2\25A2\25B6"; /* ▢▢▢▢▶ */
padding-right: 0;
}对应 HTML 结构应为：
立即学习“前端免费学习笔记（深入）”；
<ul> <li>general data</li> <!-- 使用白色箭头 --> <li class="known">marked data</li> <!-- 使用黑色箭头 --> </ul>
⚠️ 注意事项：
- 使用
::before（双冒号）是现代标准写法，明确区分伪元素（::）与伪类（:）；旧式单冒号:before虽仍兼容，但建议统一使用双冒号。 - 确保
<li>外层包裹<ul></ul>或<ol></ol>，否则部分浏览器可能忽略::before渲染（语义与渲染行为相关）。 - 若需进一步扩展（如支持多级嵌套或响应式变体），可结合属性选择器（如
li[data-type="urgent"]::before）或 CSS 自定义属性提升可维护性。
通过精准控制选择器粒度，你无需手动在 HTML 中重复插入 Unicode 符号——CSS 层面即可实现语义化、可复用的视觉区分。
