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

时间:2015-07-15 18:52:48

标签: html css

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

enter image description here 最简单的方法是,如果我只能使用span“list-style elements”(1.2。等等......):

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

但这对“列表式元素”没有任何作用(1. 2. 3.等......) 有什么解决方案吗?我需要5种可选择的背景颜色列表样式元素:黄色,红色,橙色,绿色,浅绿色。请回答。

5 个答案:

答案 0 :(得分:6)

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

但无论如何,这里没有必要使用额外的标记,只要你在其中放置正确的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: 0.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

答案 1 :(得分:3)

试试这个:

&#13;
&#13;
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;
}
&#13;
<ul>
    <li>..text..</li>
    <li>..text..</li>
    <li>..text..</li>
</ul>
&#13;
&#13;
&#13;

答案 2 :(得分:3)

您可以使用伪元素和相对定位

来完成此操作

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>

答案 3 :(得分:1)

使用一些CSS3技巧,你可以得到一个非常接近你所寻求的结果,但我不相信你能得到完全匹配。

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

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

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

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

答案 4 :(得分:0)

这里这样做。这是我的小提琴https://jsfiddle.net/d7tp553z/1/

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