如何为HTML列表(ol/ul)中不同类别的li设置不同项目符号

你的CSS选择器层级写反了，这是唯一的问题。

你现有代码里写的.ok li:before 匹配的是「父元素带有ok类的子级li元素的before伪元素」，但你的ok、ko类是直接加在li元素自身上的，所以这个选择器根本匹配不到目标元素。

只需要把对应选择器调整为直接选中带类的li本身即可，修正后的完整CSS如下：

ol {
  padding-left: 30px;
  list-style: none;
}

li:before {
  margin-left: -20px;
  margin-right: 10px;
  content: '\1F44D';
}

li.ok:before {
  content: '\2714';
}

li.ko:before {
  content: '\274C';
}

修改后就可以实现：默认li显示大拇指，带ok类的li显示对勾，带ko类的li显示叉号的效果。

内容的提问来源于stack exchange，提问作者Pierre