1

我将为有序列​​表使用其他设计。所以我在这里找到了一个不错的解决方案。

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>

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

4

1 回答 1

1

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

  1. 怎么可能不对列表中的子项使用这种样式？

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

  1. 但是，如果我想要第二个具有相同类的有序列表，我该怎么办。它应该从 1 开始。

counter-reset使用选择器添加 a ，ol.numbered_style以便在每次遇到该元素时重置数字。这将使它在 1 处重新启动。

  1. 我现在不需要这个，但是否还有一种解决方案可以用指定的数字（如 2 或 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>

于 2016-03-19T16:31:39.740 回答