我可以使用 CSS 继续子列表中的数字吗？

Question

我想设置以下样式 HTML 以便章节编号按顺序 1、2、3，即使第三个编号与前两个编号在不同的列表中。

<!DOCTYPE html>
<title>Continued Numbering</title>

<style>
  ol.book-contents li {
    list-style-type: upper-roman;
  }
  ol.book-contents ol li {
    list-style-type: decimal;
  }
</style>

<ol class="book-contents">
  <li>Section One
    <ol>
      <li>Chapter One</li>
      <li>Chapter Two</li>
    </ol>
  </li>
  <li>Section Two
    <ol>
      <li>Chapter Three</li>
    </ol>
  </li>
</ol>

也就是说，我希望输出如下所示：

 I. Section One
    1. Chapter 1
    2. Chapter 2
II. Section Two
    3. Chapter 3

有什么方法可以用 CSS 做到这一点吗？

Answer 1

这是一个完整的解决方案，它使用 counter-reset, counter-increment, and content properties to solve the continued number problem, and it uses the ::marker pseudo-element to solve the formatting problem. Credit to rachelandrew 作为 ::marker 的想法。 HTML 中不需要额外标记（超出原始问题中指定的 book-contents class）。

正如您在测试中看到的那样，CSS 处理了麻烦的第十章，其中 (1) 其多位数章节编号正确对齐其小数点，以及 (2) 其长名称环绕带有适当的悬挂缩进。

ol.book-contents {
  counter-reset: chapter;
}

ol.book-contents li {
  list-style-type: upper-roman;
}

ol.book-contents li ol li {
  list-style-type: decimal;
  counter-increment: chapter;
}

ol.book-contents li ol li::marker {
  content: counter(chapter) '. ';
}

<!DOCTYPE html>
<title>Continued Numbering</title>

<ol class="book-contents">
  <li>Section One
    <ol>
      <li>Chapter One</li>
      <li>Chapter Two</li>
    </ol>
  </li>
  <li>Section Two
    <ol>
      <li>Chapter Three</li>
      <li>Chapter Four</li>
      <li>Chapter Five</li>
      <li>Chapter Six</li>
      <li>Chapter Seven</li>
      <li>Chapter Eight</li>
      <li>Chapter Nine</li>
      <li>Chapter Ten (shown so you can see its proper decimal alignment and its proper long-string wrapping behavior that honors the hanging indent)</li>
    </ol>
  </li>
</ol>

Answer 2

可以使用 start 属性为 ol 的计数创建偏移量，例如

<ol start="3">

你的情况是

ol.book-contents li {
  list-style-type: upper-roman;
}

ol.book-contents ol li {
  list-style-type: decimal;
}

<ol class="book-contents">
  <li>Section One
    <ol>
      <li>Chapter One</li>
      <li>Chapter Two</li>
    </ol>
  </li>
  <li>Section Two
    <ol start="3">
      <li>Chapter Three</li>
      <li>Chapter Four</li>
    </ol>
  </li>
</ol>

Answer 3

您可以利用 CSS 计数器 将自定义列表编号保持在相同水平。

基本上有 3 个主要的 CSS 属性供您设置

counter-reset: keyword - 当你需要开始一个新的列表时，你通过关键字维护一个计数器（sublist-counter）。将其视为为计数器定义变量。
counter-increment: keyword - 在您的元素渲染上，每当selector element/pseudo元素都在DOM
content: counter(keyword) - 访问计数器的当前值

使用 ::before 伪元素，您可以定义自己的列表样式，并将 ol 上的列表样式设置为 none 适用于您的用例

Learn more about CSS counters

body {
  counter-reset: sublist-counter;                       /* Set a counter named 'section', and its initial value is 0. */
}

ol.sublist{
  list-style:none;
  padding-left: 10px;
}

ol.sublist > li::before {
  counter-increment: sublist-counter;
  content: counter(sublist-counter)  ". ";
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ol class="book-contents">
  <li>Section One
    <ol class="sublist">
      <li>Chapter One</li>
      <li>Chapter Two</li>
    </ol>
  </li>
  <li>Section Two
    <ol class="sublist">
      <li>Chapter Three</li>
    </ol>
  </li>
</ol>
</body>
</html>

我可以使用 CSS 继续子列表中的数字吗？

Can I continue numbers in a sublist using CSS?

html

css

html-lists