css - 使用 CSS 为有序列表编号中的子项设置样式

Question

我将为有序列​​表使用其他设计。所以我找到了一个 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不工作？如果我想要具有相同类别的第二个有序列表，我还必须做什么。它应该以 1 开头。 <ol class="numbered_style" start="1">没有帮助。是否可以使用 2 或 1.1 等指定数字开始有序列表？对于正常 ol我可以使用 start="number" , 但我认为它被禁用是因为 ol.numbered_style { list-style: none; } .

Answer 1

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

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

使用子选择器 ( > ) 仅选择 li直接存在于父项下 ol标记而不是选择所有 li父级下任何级别的元素 ol标签。 list-style此处设置无效，因为此处的编号是使用计数器生成和添加的。

2. 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选择器，以便每次遇到该元素时都会重置数字。这将使它从 1 点重新开始。

3. 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属性我们还可以提供计数器的初始值(作为空格分隔值列表中的第二个)。请参阅下面的代码片段以获取演示。

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>