如何使有序列表变为 1.1.1、1.2、A、B、C、1.3、1.4

Question

由于我在 Whosebug 上找不到满足我的需求的 post，所以我提出了一个新问题来解决我的问题。

我正在尝试构建一个有序列表，其中我想要：

目前，我有：

虽然我尝试了一些事情，但没有成功，所以如果能得到一些帮助，我将不胜感激。

这可能是我想要做的吗？如果是，如何？如果不是，为什么？

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

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

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

li li {
    margin: 10px;
}

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


.bolder {
    font-size: 1.17em;
    font-weight: bolder;
    margin: 0px;
}

.parent::before {
    font-size: 1.17em;
    font-weight: bolder;
}

<li class="parent">
  <p class="bolder">How I want it to look like</p>
  <ol>
    <li>This is 1.1
      <ol>
        <li class="subItem">
          This is what I want to be A
        </li>
        <li class="subItem">
          This is what I want to be B
        </li>
        <li class="subItem">
          This is what I want to be C
        </li>
      </ol>
    </li>
    <li>
      Then it continues on with 1.2
    </li>
    <li>
      Then 1.3.. etc.
    </li>
  </ol>
</li>

Answer 1

我认为解决此问题的最佳方法是将 class 分配给要显示字母样式的列表，然后在其中使用 list-style-type:upper-alpha class.

Answer 2

如果您想定位 li 的第三层，您可以使用 ol ol ol li 选择器。要使用大写字母，您可以使用 counter() instead of counters()，因为 counters() 生成的文本是所有计数器的值，而 counter() 它只是最里面计数器的值。

如果您将计数器样式设置为 upper-alpha，则标记将为大写字母。

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

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

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

li li {
  margin: 10px;
}

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

.bolder {
  font-size: 1.17em;
  font-weight: bolder;
  margin: 0px;
}

.parent::before {
  font-size: 1.17em;
  font-weight: bolder;
}

ol ol ol li:before {
  content: counter(item, upper-alpha);
}

<ol>
  <li class="parent">
    <p class="bolder">How I want it to look like</p>
    <ol>
      <li>This is 1.1
        <ol>
          <li class="subItem">
            This is what I want to be A
          </li>
          <li class="subItem">
            This is what I want to be B
          </li>
          <li class="subItem">
            This is what I want to be C
          </li>
        </ol>
      </li>
      <li>
        Then it continues on with 1.2
      </li>
      <li>
        Then 1.3.. etc.
        <ol>
          <li class="subItem">
            This is what I want to be A
          </li>
          <li class="subItem">
            This is what I want to be B
          </li>
        </ol>
      </li>
    </ol>
  </li>
</ol>

如何使有序列表变为 1.1.1、1.2、A、B、C、1.3、1.4

How can I make an ordered list go 1. 1.1, 1.2, A, B, C, 1.3, 1.4

html

css

html-lists