Question

我有一个有序列表（a，b，c ...），并希望将实际项目符号（a，b，c ...）的背景颜色设置为不同的颜色。我该如何设计呢？ list-type属性似乎只更改项目符号，而不是为它们添加样式。我想维护它们的类型=“a”列表结构，只需为每个字母添加背景颜色。

另外......有人可以跟我分享如何将子弹中心或将它们冲到一边吗？目前，他们看起来有点脱节。

Answer 1

使用@ kingkong上面的评论，您可以这样做：

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

这是一个小提琴：http://jsfiddle.net/2ZsQY/

Answer 2

http://jsfiddle.net/Ue6nu/2/

即使在以下情况下也会保留默认的低级字母：不支持。

ul {font: 0.85em Arial;margin:0;}
li {
    list-style-position: outside;
    list-style-type: lower-alpha;
    position:relative;
}
li:first-child {
    counter-reset:index;
}
li:before {
    content: counter(index, lower-alpha) '.';
    counter-increment:index;
    background: #fff;
    position:absolute;
    left:-1.3em;
    z-index:10;
    display:inline-block;
    width:1em;
    color: red;
    font-size: inherit;
    font-weight:bold;
}

Answer 3

您可以使用nth-child选择器和伪元素设置样式。

ul li:before {  
    content: "• ";
    background-color: red;
}

Fiddle demo

添加背景颜色到列表项目项目符号

3 个答案: