CSS设计订单清单

我有这样的HTML和CSS我想做设计。CSS设计订单清单

CSS：

ol li {list-style-type: decimal-leading-zero;}

HTML：以上

<ol> 
<li>One</li> 
<li>Two</li> 
<li>Three 
<ol> 
<li>Three.One</li> 
<li>Three.Two</li> 
</ol> 
</li> 
<li>Four</li> 
</ol>

与此

现在是我的HTML和CSS的内容。正如你所看到的，我不想在这个订单列表中使用任何span元素或锚标签。那么，我可以为OL（订单）号码和李的文字内容制作不同的颜色吗？我想让红色的数字和黑色的李的内容。

来源

2013-05-09 badal

的（我自己的问题，从前段时间）可能重复：如何上色列表风格 - 键入auo生成的数字？]（http://stackoverflow.com/questions/725741/how-to-colour-the-list-style-type-auto-generated-numbers） – 2013-05-09 07:07:47

这里是solution。

ol li { 
 
    list-style-type: decimal-leading-zero; 
 
} 
 

 
ol { 
 
    counter-reset: li; 
 
} 
 

 
ol li { 
 
    list-style-type: none; 
 
    counter-increment: li; 
 
    position: relative; 
 
} 
 

 
ol li:before { 
 
    content: counter(li, decimal-leading-zero) "."; 
 
    position: absolute; 
 
    left: -2.6em; 
 
    width: 2em; 
 
    text-align: right; 
 
    color: #f00; 
 
}

<ol> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three 
 
    <ol> 
 
     <li>Three.One</li> 
 
     <li>Three.Two</li> 
 
    </ol> 
 
    </li> 
 
    <li>Four</li> 
 
</ol>

希望这有助于。

来源

2013-05-09 07:11:10 Nitesh

嗨Nathan ...真的很感谢...它工作得很好，而且看起来很棒。:) – badal 2013-05-09 07:17:07

使用此

ol {color: #ff0000;} 
ol li { color: #000000; }

来源

2013-05-09 07:03:07 Sudz

@sudz .. 实际上它不起作用。因为整个UL LI都是黑色。 – badal 2013-05-09 07:05:35

[不起作用]（http://jsfiddle.net/eG4hv/）。 – Vucko 2013-05-09 07:05:36

什么是这样的：

ol { 
    counter-reset: item; 
    margin-left: 0; 
    padding-left: 0; 
} 
li { 
    display: block; 
    margin-bottom: .5em; 
    margin-left: 2em; 
} 
li:before { 
    display: inline-block; 
    color: red; 
    content: counter(item, decimal-leading-zero); 
    counter-increment: item; 
    width: 2em; 
    margin-left: -2em; 
}

这里有一个working example。

来源

2013-05-09 07:05:14

那么'ol li {list-style-type：decimal-leading-zero;}'？ – Vucko 2013-05-09 07:06:35

这一个也是行不通的：（\ – badal 2013-05-09 07:07:39

这意味着它开始于01,02等所以我想给这个数字只有红色和只有内容黑色 – badal 2013-05-09 07:08:27

下面的CSS应该做的伎俩：

ol { 
    list-style: none; 
    counter-reset: count; 
    margin: .8em 0; 
    padding: 0; } 
    ol ol { 
    margin: 0; } 
    ol li { 
    margin: 0; 
    padding: 0 0 0 2em; } 
    ol li:before { 
     counter-increment: count; 
     content: counter(count, decimal-leading-zero) ".\00a0"; 
     display: inline-block; 
     min-width: 2em; 
     margin-left: -2em; 
     text-align: right; 
     color: red; }

jsFiddle Demo

该解决方案依赖于CSS Counters跟踪应显示十进制数。 content: counter(count) ".\00a0";输出count计数器的当前值，后跟一个句点和non-breaking space。 :before psuedo-element被设置为内嵌块元素，负边距将其拉到左边填充到LI。

来源

2013-05-09 07:18:01 thirdender

你可以在这里使用了一些技巧，使用：before伪元素

ol li{ 
    list-style:none; 
    counter-increment:li; 
    color:#27ae60; 
} 
ol li:before{ 
    content:counter(li, decimal-leading-zero)'.'; 
    color:#c0392b; 
    padding-right:5px; 
}

看一看演示HERE。

来源

2013-05-09 07:32:34

ol { 
    counter-reset: li; 
    list-style: none; 
} 

li:before { 
    counter-increment: li;            
    content: counter(li, decimal-leading-zero)". "; 
    color: red;  
}

或

ol { 
    counter-reset: li; 
    list-style: none; 
} 

li:before { 
    counter-increment: li;            
    content: counters(li, ".", decimal-leading-zero) ". "; 
    color: red;  
}

或

ol { 
    counter-reset: li; 
    list-style: none; 
} 

li:before { 
    counter-increment: li;            
    content: "0" counters(li, ".") " "; 
    color: red;  
}

Demo

来源

2013-05-09 10:25:28

CSS设计订单清单

回答

相关问题