html - 有序列表 1, 1.1, a

Question

当前结果:

1. Item
  1.1 Subitem
  1.2 Subitem2
     1.2.1 something more
     1.2.2 another point

期望的结果:

1. Item
  1.1 Subitem
  1.2 Subitem2
     a. something more
     b. another point

如何修改我的代码以将第三级设置为字母而不是 3 个数字。我添加了 type="a"到正确的<ol> HTML 中的元素，但它被覆盖了。

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;
}

<ol>
  <li>
    <b>
       Our rights if you breach this policy
     </b>
    <ol>
      <li>
        We will decide whether there has been a breach of this policy by you.
      </li>
      <li>
        If we decide that you are in breach of any part of this policy, we may:
        <ol type="a">
          <li>
            issue a warning to you;
          </li>
          <li>
            immediately stop your right to use our Service;
          </li>
          <li>
            take legal action against you to recover any of our losses caused by your breach; or
          </li>
          <li>
            notify law enforcement authorities if we decide that you have broken any law; or
          </li>
          <li>
            take any other action that we think is appropriate.
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

Answer 1

您可以使用 list-style-type: lower-alpha;并用 :not() 取消你的计数器伪类:

1. 在样式表的末尾创建一个以您的 type="a" 为目标的规则并分配您想要的列表样式类型(小字母)。
2. 您的计数器将覆盖此声明，因此一个简单的解决方案是仅将它们应用于 <ol> :not([type="a"]) 的元素(不是您的 alpha 列表之一)。

希望这对你有用:

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

ol:not([type="a"]) > li {
  display: table;
  counter-increment: item;
  margin-bottom: 0.6em;
}

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

ol[type="a"] {
  list-style-type: lower-alpha;
}

<ol>
<li>
    <b>
        Our rights if you breach this policy
    </b>
    <ol>
        <li>
            We will decide whether there has been a breach of this policy by you.
        </li>
        <li>
            If we decide that you are in breach of any part of this policy, we may:
            <ol type="a">
                <li>
                    issue a warning to you;
                </li>
                <li>
                    immediately stop your right to use our Service;
                </li>
                <li>
                    take legal action against you to recover any of our losses caused by your breach; or
                </li>
                <li>
                    notify law enforcement authorities if we decide that you have broken any law; or
                </li>
                <li>
                    take any other action that we think is appropriate.
                </li>
            </ol>
        </li>
    </ol>
</li>
</ol>