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 内容。如您所见，我不想在此订单列表中使用任何 span 元素或锚标记。那么，我可以为 OL（订单列表）编号和 li 的文本内容制作不同的颜色吗？我想为数字制作红色，为 li 内容制作黑色。

4

6 回答 6

4

这是解决方案。

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-09T07:11:10.980 回答
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 {color: #ff0000;}
ol li { color: #000000; }
于 2013-05-09T07:03:07.050 回答
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

下面的 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 计数器来跟踪应显示的十进制数。content: counter(count) ".\00a0";输出计数器的当前值count，后跟句点和不间断空格。psuedo :before-element 被设置为 inline-block 元素，负边距将其向左拉到LIpadding 上。

于 2013-05-09T07:18:01.627 回答
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 回答