html - li编号后加一个 "."

Question

我有一个按 1 递增的有序列表。我想做的是让它按 1 递增，并在 1 之后加上一个点:

1.
2.
3.
4 

在我的列表中，我的工作方式如下，

1
 1.1
 1.2
 1.3
2
 2.1
 2.2
3
 3.1
 3.2
 3.3

所以这是正确的，我只希望开头的数字也有一个 .在最后。

我当前的代码看起来像这样:

ol { 
  counter-reset: item ;
}

li { 
  display: block;
}

li:before {
  content: counters(item, ".") " "; 
  counter-increment: item;
  float: left;
}

<ol>
  <li> 
    <ol>

    </ol>
  </li>
</ol>

所以它最终应该是这样的:

1.
 1.1
 1.2
 1.3
2.
 2.1
 2.2
 2.3
3.
 3.1
 3.2
 3.3

Answer 1

Here's a Fiddle你想要什么。

我所做的只是更改 CSS，以便有序列表项在末尾有一个句点，除非它们比 1 层更深。相当简单。

ol li::before {
    content: counters(item, ".") ". ";
    counter-increment: item;
}

ol ol li::before {
    content: counters(item, ".") " ";
}

不需要额外的、不必要的类。

希望对你有帮助