我想创建这个:http://www.kephost.com/images/2015/07/15/ol-color-picture.png
最简单的方法是,如果我只能使用span“list-style elements”(1.2。等等......):
<ol>
<span style="background-color:Aqua><li></span>..."text"...</li>
</ol>
但这对“列表式元素”没有任何作用(1. 2. 3.等......) 有什么解决方案吗?我需要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)
试试这个:
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;
答案 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>