使用CSS

Question

我将使用其他设计作为有序列表。所以我在SO上找到了nice solution。

body { counter-reset: item; }

ol.numbered_style li:before
{
    counter-increment:item;
    margin-bottom:5px;
    margin-right:10px;
    content:counter(item);
    background:gold;
    border-radius:100%;
    color:white;
    width:1.2em;
    text-align:center;
    display:inline-block;
}

ol.none, ul.none,ol.numbered_style { list-style: none; }

<ol class="numbered_style">
    <li>First</li>
    <li>Second</li>
    <li>Third
        <ol class="none">
            <li>Subitem</li>	
        </ol>
    </li>
    <li>Fourth
        <ul class="none">
            <li>Other Subitem</li>	
        </ul>
    </li>
</ol>

如何才能将此样式用于列表中的子项？ 为什么我的班级none的条件不起作用？ 如果我想要一个具有相同类的第二个有序列表，我还需要做什么。它应 以1 开头。 <ol class="numbered_style" start="1">没有帮助。 是否可以使用指定的数字（如2或1.1）启动有序列表？对于正常ol我可以使用start="number"，但我认为由于ol.numbered_style { list-style: none; }而被停用。

Answer 1

添加作为答案，因为该问题有多个部分：

  

  
1. 如何才能将此样式用于列表中的子项？
  

使用子选择器（>）仅选择直接位于父li标记下的ol，而不是选择所有li元素父ol标记下的级别。 list-style设置在此处无效，因为此处的编号是使用计数器生成和添加的。

  

  
1. 但是我需要做什么，如果我想要一个具有相同类的第二个有序列表。它应该从1开始。
  

使用counter-reset选择器添加ol.numbered_style，以便每次遇到该元素时重置该号码。这将使它重新开始。

  

  
1. 我现在不需要这个，但是还有一个解决方案来启动这个有序列表，指定的数字如2或1.1？
  

是的，可以在2开始。在counter-reset属性中，我们还可以提供计数器的初始值（作为空格分隔值列表中的第二个值）。请参阅下面的代码片段进行演示。

body, ol.numbered_style {
  counter-reset: item;
}
ol.numbered_style.starts_at_2 {
  counter-reset: item 1; /* the second is the start value, default is 0 */
}
ol.numbered_style > li:before {
  counter-increment: item;
  margin-bottom: 5px;
  margin-right: 10px;
  content: counter(item);
  background: gold;
  border-radius: 100%;
  color: white;
  width: 1.2em;
  text-align: center;
  display: inline-block;
}
ol.none, ul.none, ol.numbered_style {
  list-style: none;
}

<ol class="numbered_style">
  <li>First</li>
  <li>Second</li>
  <li>Third
    <ol class="none">
      <li>Subitem</li>
    </ol>
  </li>
  <li>Fourth
    <ul class="none">
      <li>Other Subitem</li>
    </ul>
  </li>
</ol>

<ol class="numbered_style">
  <li>First</li>
  <li>Second</li>
  <li>Third
    <ol class="none">
      <li>Subitem</li>
    </ol>
  </li>
  <li>Fourth
    <ul class="none">
      <li>Other Subitem</li>
    </ul>
  </li>
</ol>

<ol class="numbered_style starts_at_2">
  <li>First</li>
  <li>Second</li>
  <li>Third
    <ol class="none">
      <li>Subitem</li>
    </ol>
  </li>
  <li>Fourth
    <ul class="none">
      <li>Other Subitem</li>
    </ul>
  </li>
</ol>

从1.1开始更加棘手，因为我们必须在ol级别添加一个计数器，在li级别添加另一个计数器。以下是示例演示。

body{
  counter-reset: ol ;
}
ol.numbered_style{
  counter-reset: li;
  counter-increment: ol;
}
ol.numbered_style > li:before {
  counter-increment: li;
  content: counter(ol) "." counter(li);
  margin-bottom: 5px;
  margin-right: 10px;
  background: gold;
  border-radius: 100%;
  color: white;
  width: 2em;
  text-align: center;
  line-height: 2em;
  display: inline-block;
}
ol.none, ul.none, ol.numbered_style {
  list-style: none;
}

<ol class="numbered_style">
  <li>First</li>
  <li>Second</li>
  <li>Third
    <ol class="none">
      <li>Subitem</li>
    </ol>
  </li>
  <li>Fourth
    <ul class="none">
      <li>Other Subitem</li>
    </ul>
  </li>
</ol>