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設計訂單清單

回答

相關問題