带 CSS 的有序列表编号中的样式子项

Question

我将为有序列表使用其他设计。所以我在 SO 上找到了 nice solution。

body { counter-reset: item; }

ol.numbered_style li:before
{
    counter-increment:item;
    margin-bottom:5px;
    margin-right:10px;
    content:counter(item);
    background:gold;
    border-radius:100%;
    color:white;
    width:1.2em;
    text-align:center;
    display:inline-block;
}

ol.none, ul.none,ol.numbered_style { list-style: none; }

<ol class="numbered_style">
    <li>First</li>
    <li>Second</li>
    <li>Third
        <ol class="none">
            <li>Subitem</li> 
        </ol>
    </li>
    <li>Fourth
        <ul class="none">
            <li>Other Subitem</li> 
        </ul>
    </li>
</ol>

列表中的子项怎么可能不使用这种样式？为什么我的 class 的条件 none 不工作？另外，如果我想要具有相同 class 的第二个有序列表，我该怎么办？它应该以1开头。 <ol class="numbered_style" start="1"> 没有帮助。是否可以使用 2 或 1.1 等指定数字开始有序列表？对于正常的 ol 我可以使用 start="number"，但我认为它被禁用是因为 ol.numbered_style { list-style: none; }.

Answer 1

添加为答案，因为问题不止一个部分：

How is it possible not to use this style for subitems in a list?

仅使用子 select 或 (>) 到 select 直接存在于父 ol 标签下的 li 而不是 selecting 父 ol 标签下任何级别的所有 li 元素。 list-style 设置在这里没有效果，因为这里的编号是使用计数器生成和添加的。

But what do I have to do, if I want a second ordered list with the same class. It should began with 1.

添加一个 counter-reset 和 ol.numbered_style select 或者这样每次遇到该元素时都会重置数字。这将使它在 1 重新启动。

I don't need this now, but is there also a solution to start this ordered list with a specify number like 2 or 1.1?

是的，可以在 2 开始。在 counter-reset 属性中，我们还可以提供计数器的初始值（作为 space 分隔值列表中的第二个）。请参阅下面的代码片段以获取演示。

body, ol.numbered_style {
  counter-reset: item;
}
ol.numbered_style.starts_at_2 {
  counter-reset: item 1; /* the second is the start value, default is 0 */
}
ol.numbered_style > li:before {
  counter-increment: item;
  margin-bottom: 5px;
  margin-right: 10px;
  content: counter(item);
  background: gold;
  border-radius: 100%;
  color: white;
  width: 1.2em;
  text-align: center;
  display: inline-block;
}
ol.none, ul.none, ol.numbered_style {
  list-style: none;
}

<ol class="numbered_style">
  <li>First</li>
  <li>Second</li>
  <li>Third
    <ol class="none">
      <li>Subitem</li>
    </ol>
  </li>
  <li>Fourth
    <ul class="none">
      <li>Other Subitem</li>
    </ul>
  </li>
</ol>

<ol class="numbered_style">
  <li>First</li>
  <li>Second</li>
  <li>Third
    <ol class="none">
      <li>Subitem</li>
    </ol>
  </li>
  <li>Fourth
    <ul class="none">
      <li>Other Subitem</li>
    </ul>
  </li>
</ol>

<ol class="numbered_style starts_at_2">
  <li>First</li>
  <li>Second</li>
  <li>Third
    <ol class="none">
      <li>Subitem</li>
    </ol>
  </li>
  <li>Fourth
    <ul class="none">
      <li>Other Subitem</li>
    </ul>
  </li>
</ol>

让它从 1.1 开始有点棘手，因为我们必须在 ol 级别添加一个计数器，在 li 级别添加另一个。下面是一个示例演示。

body{
  counter-reset: ol ;
}
ol.numbered_style{
  counter-reset: li;
  counter-increment: ol;
}
ol.numbered_style > li:before {
  counter-increment: li;
  content: counter(ol) "." counter(li);
  margin-bottom: 5px;
  margin-right: 10px;
  background: gold;
  border-radius: 100%;
  color: white;
  width: 2em;
  text-align: center;
  line-height: 2em;
  display: inline-block;
}
ol.none, ul.none, ol.numbered_style {
  list-style: none;
}

<ol class="numbered_style">
  <li>First</li>
  <li>Second</li>
  <li>Third
    <ol class="none">
      <li>Subitem</li>
    </ol>
  </li>
  <li>Fourth
    <ul class="none">
      <li>Other Subitem</li>
    </ul>
  </li>
</ol>

带 CSS 的有序列表编号中的样式子项

Style subitems in ordered list numbers with CSS

css

list

css-counter