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

【问题标题】：html: <ol> list-style background colorhtml: <ol> 列表样式背景颜色
【发布时间】：2015-10-04 23:38:56
【问题描述】：

我想创建这个：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 种可选的背景颜色：黄色、红色、橙色、绿色、浅绿色。谢谢回答。

【问题讨论】：

HTML 无效。
实现这一点的正确方法是使用 css 计数器而不是常规的列表样式元素。请参阅下面的答案。

标签： html css

【解决方案1】：

您需要先修复无效的 HTML。 <ol> 中允许的唯一直接子元素是 <li>。将<li> 包裹在<span> 中不仅无效，而且还违反了格式良好的规则，即嵌套元素时，外部元素必须在在内部元素之后关闭元素。

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

.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

【讨论】：

他想要数字着色，而不是文本。
我意识到，在我发布了最初的答案后，我立即使用 css 计数器调整了答案。

【解决方案2】：

通过一些 CSS3 技巧，您可以获得与您正在寻找的结果非常接近的结果，尽管我不相信您可以获得完全匹配的结果。

看看这个小提琴：https://jsfiddle.net/j4Lrewkd/

您可以看到一些使用的技巧： list-style-type: none; 删除有序列表中的数字。

::before 伪选择器允许我们用可样式化的元素替换它们。

最后，:nth-of-type() 选择器允许我们单独设置每个元素的样式。

【讨论】：

【解决方案3】：

试试这个：

ul > li:before {  
    background-color: red;
    margin-right: 5px;
    padding: 0 5px;
    content: counter(index, decimal);
    counter-increment:index;
}
li:first-child {
    counter-reset:index;
}
ul li {
    list-style: none;
}

ul > li:nth-child(1):before {  
    background-color: yellow;
}

ul > li:nth-child(2):before {  
    background-color: blue;
}

ul > li:nth-child(3):before {  
    background-color: orange;
}

<ul>
    <li>..text..</li>
    <li>..text..</li>
    <li>..text..</li>
</ul>

【讨论】：

【解决方案4】：

您可以使用伪元素和相对定位来做到这一点

li:before {
  content: '';
  display: inline-block;
  height: 20px;
  width: 20px;
  position: relative;
  left: -24px;
  top: 5px;
  z-index: -1;
}
li.red:before {
  background-color: red;
}
li.blue:before {
  background-color: blue;
}
li.aqua:before {
  background-color: aqua;
}
li.yellow:before {
  background-color: yellow;
}

<ol>
  <li class="red">First item</li>
  <li class="blue">Second item</li>
  <li class="aqua">Third item</li>
  <li class="yellow">One more</li>
</ol>

【讨论】：

这不适用于较大的字体大小，并且它也会失败，例如三位数的订购号，例如，您可以轻松地将它们放入前 100 名图表列表或地址列表中。最好使用 CSS 计数器来实现。

【解决方案5】：

在这里执行此操作。这是我的小提琴https://jsfiddle.net/d7tp553z/1/

<ol style="background-color: blue;">
   <li style="background-color: white;">..."text"...</li>
</ol>

【讨论】：