使用CSS在有序列表编号中样式子项 [英] Style subitems in ordered list numbers with CSS

问题描述

我将使用其他设计来处理有序列表.因此，我在SO上找到了一个很好的解决方案.

I will use an other design for an ordered list. So I found a nice solution here on SO.

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; }，我认为它已被禁用.

How is it possible not to use this style for sub-items in a list? Why isn't the conditions for my class called none not working? Also what do I have to do, if I want a second ordered list with the same class. It should begin with 1. <ol class="numbered_style" start="1"> didn't helped. Is it possible to start a ordered list with a specify number like 2 or 1.1? For a normal ol I could use start="number", but I think it is disabled because of ol.numbered_style { list-style: none; }.

推荐答案

由于问题涉及多个部分，因此添加为答案:

Adding as an answer since there are more than one part to the question:

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

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

Use the children selector (>) to select only the li that are directly present under the parent ol tag instead of selecting all li elements that are at any level under the parent ol tag. The list-style setting has no effect here because the numbering here is generated and added using counters.

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

使用ol.numbered_style选择器添加counter-reset，以便每次遇到该元素时都会重置该数字.这将使其从1重新启动.

Add a counter-reset with the ol.numbered_style selector so that the number is reset everytime that element is encountered. This will make it restart at 1.

1. 我现在不需要这个了，但是还有一种解决方案可以用指定的数字(例如2或1.1)开始此有序列表吗?

是的，可以从2开始.在counter-reset属性中，我们还可以提供计数器的初始值(作为空格分隔的值列表中的第二个).请参考下面的代码片段进行演示.

Yes, starting it at 2 is possible. In the counter-reset property we can also provide the initial value of the counter (as the second in a list of space separated values). Refer below snippet for a demo.

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级别添加另一个计数器.下面是一个示例演示.

Making it start at 1.1 is a bit more tricky as we have to add one counter at ol level and another at li level. Below is a sample demo.

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在有序列表编号中样式子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！