伪类选择性使用问题：如何为特定li元素设置不同:before样式

你的问题出在CSS选择器的写法上：
你写的.known li:before是在匹配带有.known类的父元素内部的li元素，但你的HTML结构是li自身就带有.known类，所以这个选择器根本无法命中目标元素。

修正后的代码 #

CSS 部分

/* 先隐藏默认列表项目符号，避免和自定义内容重叠 */
li {
  list-style: none;
}

/* 所有li的默认:before样式 */
li:before {
  content: "\25A2\25A2\25A2\25A2\25B7";
  padding-right: 8px; /* 可选：增加间距让内容更美观 */
}

/* 带有known类的li的:before样式 */
li.known:before {
  content: "\25A2\25A2\25A2\25A2\25B6";
}

HTML 部分

<li>general data</li>
<li class="known">marked data</li>

说明 #

• li.known:before 表示选中所有带有known类的li元素的:before伪类，这才是符合你HTML结构的正确选择器。
• 添加list-style: none是为了清除浏览器默认的列表项目符号，防止和你自定义的符号重叠。
• 可以调整padding-right的值来控制自定义符号和文本之间的间距，提升可读性。

内容的提问来源于stack exchange，提问作者James V. Fields