时间戳

首页 > 解决方案 > 嵌套有序列表 HTML：第三个增量为不同类型

html - 嵌套有序列表 HTML：第三个增量为不同类型

问题描述

我需要在我们的网站上放一些法律文本（条款和条件），法律人员已经做到了，因此有 2 个级别的增量。不是一个大问题，我发现了一些可以很好地解决问题的 CSS。

但是，问题在于第三级增量不是1.1.1而是a，因此是不同的类型。而且我找不到使用 CSS 实现这一目标的方法。

一个额外的复杂情况是，在另一段中，他们使用了第三级的另一种类型：i、ii、iii。

我使用的代码如下。关于如何实现这一目标的任何想法？

<!DOCTYPE html>
<html>
<head>
<style>
ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ". ";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

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

</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item</li>
    <li>item</li>
    <li>item
    <ol>
      <li>this needs to be a</li>
      <li>this needs to be b</li>
      <li>this needs to be c</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>

</ol>

</body>
</html>

标签： htmlcsshtml-listsnested-lists

解决方案

好的，我想通了，这要感谢Lister 先生关于课程的指针。

诀窍有两个方面：

  1. 将特定选择器添加到 CSS 以仅选择列表的第 3 级
  2. 添加 2 个类，一个用于 lower-alpha，一个用于 lower-roman

完整代码如下。

<!DOCTYPE html>
<html>
<head>
<style>

ol {
  list-style-type: none;
  counter-reset: item;
  margin: 0;
  padding: 0;
}

ol > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

ol > li:before {
  content: counters(item, ".") ".";
  display: table-cell;
  padding-right: 0.6em;    
}

li ol > li {
  margin: 0;
}

li ol > li {
  margin: 0;
}

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

li ol li ol.alpha> li:before {
  content: counter(item, lower-alpha)".";
}

li ol li ol.roman> li:before {
  content: counter(item, lower-roman)".";
}

</style>
</head>
<body>

<ol>
  <li>item</li>
  <li>item   
  <ol>
    <li>item
     <ol class="alpha">
      <li>this needs to be a</li>
      <li>this needs to be b</li>
      <li>this needs to be c</li>
    </ol>
    </li>
    <li>item</li>
    <li>item
    <ol class = "roman">
      <li>this needs to be i</li>
      <li>this needs to be ii</li>
      <li>this needs to be iii</li>
    </ol>
    </li>
    <li>item</li>
  </ol>
  </li>
  <li>item</li>
  <li>item</li>

</ol>

</body>
</html>

感谢您让我朝着正确的方向前进！

推荐阅读