html: <ol> 列表样式背景色

Question

我想创建这个:http://www.kephost.com/images/2015/07/15/ol-color-picture.png

最简单的方法是，如果我只能将 span 用于“列表样式元素”(1. 2. 3. 等...):

<ol>
   <span style="background-color:Aqua><li></span>..."text"...</li>
</ol>

但这对“列表样式元素”(1. 2. 3. 等...)没有任何作用 有什么解决办法吗？我需要 5 种可选的列表样式元素背景颜色:黄色、红色、橙色、绿色、浅绿色。感谢您的回答。

Answer 1

您需要先修复无效的 HTML。 <ol> 中唯一允许的直接子元素是 <li> .包装 <li>在<span>不仅无效，而且还违反了良构规则，该规则基本上规定，当您嵌套元素时，外部元素必须在内部元素之后关闭。

但无论如何，这里没有必要使用额外的标记，只需 <li>只要您在其中放置正确的 css 类，就会正常工作:

.bg-yellow::before {
  background-color: yellow;
}
.bg-red::before {
  background-color: red;
}
.bg-green::before {
  background-color: green;
}
.bg-orange::before {
  background-color: orange;
}
.bg-aqua::before {
  background-color: aqua;
}
ol {
  counter-reset: myOrderedListItemsCounter;
}
ol li {
  list-style-type: none;
  position: relative;
}
ol li:before {
  counter-increment: myOrderedListItemsCounter;
  content: counter(myOrderedListItemsCounter)".";
  margin-right: .5em;
}

<ol>
  <li class="bg-yellow">Yellow here</li>
  <li class="bg-red">Red here</li>
  <li class="bg-orange">Orange here</li>
  <li class="bg-green">Green here</li>
  <li class="bg-aqua">Aqua here</li>
</ol>

如果您到目前为止还没有使用过 css 计数器，这里有一些关于它的更多信息:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Counters