html:< ol>列表样式的背景色 [英] html: <ol> list-style background color

问题描述

我想创建以下内容:

I would like to create this: http://www.kephost.com/images/2015/07/15/ol-color-picture.png

The easiest way would be, if i could use span for only the "list-style elements"(1. 2. 3. etc...):

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

But that doesn't do anything with the "list-style elements" (1. 2. 3. etc...) Is there any solution? I need exactly 5 choosable background-color for the list-style elements: yellow, red, orange, green, aqua. Thx for answering.

解决方案

You need to fix your invalid HTML first. The only direct child elements allowed in <ol> are <li>. Wrapping <li> in a <span> is not only invalid, you also have disobeyed the rule of well-formedness, which basically states that when you nest elements, the outer element must be closed after the inner element.

But anyway, it's not necessary here to use additional markup, just the <li>will work fine as long as you place the proper css class in it:

.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>

If you have no experience with css counters as of now, here's some more information on it:

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

这篇关于html:< ol>列表样式的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！