1

デザインしたいHTMLと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 コンテンツが表示されます。ご覧のとおり、この順序リストでスパン要素やアンカー タグを使用したくありません。では、OL（注文リスト）番号とliのテキスト内容を別の色にすることはできますか？数字は赤、内容は黒にしたいです。

4

6 に答える 6

3 
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;      
}

デモ

于 2013-05-09T10:25:28.180 に答える
0

このようなものはどうですか：

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;
}

これが実際の例です。

于 2013-05-09T07:05:14.657 に答える
0

ここで、: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;
}

ここでデモをご覧ください。

于 2013-05-09T07:32:34.010 に答える