html - 如何在 html 列表 (ol/ul) 中为不同的项目 (li) 放置不同的项目符号？

Question

我希望具有“ok”类的 li 显示一个选中标记，而具有“ko”类的 li 显示一个十字标记。

在此示例中，我默认仅出于调试目的显示竖起大拇指：

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

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

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

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

<ol id="opponentsOfCivOL">
  <li class="ok">1</li>
  <li class="ok">1</li>
  <li class="ok">1</li>
  <li class="ko">1</li>
  <li class="ok">1</li>
</ol>

我缺少什么来完成这项工作？

标签： htmlcss

Answer 1

更改您的 CSS.ok和.ko. 而不是.ok li:before它应该是li.ok:before。

li.ok读作 find all elements with tag liwith class name ok。

而.ok li读作查找所有具有类名的ok元素以及其中具有标记名的所有元素li。

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

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