HTML命令列表1.1、1.2（嵌套计数器和作用域）不起作用

87

我使用嵌套计数器和范围来创建一个有序列表：

ol {
    counter-reset: item;
    padding-left: 10px;
}
li {
    display: block
}
li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}
<ol>
    <li>one</li>
    <li>two</li>
    <ol>
        <li>two.one</li>
        <li>two.two</li>
        <li>two.three</li>
    </ol>
    <li>three</li>
    <ol>
        <li>three.one</li>
        <li>three.two</li>
        <ol>
            <li>three.two.one</li>
            <li>three.two.two</li>
        </ol>
    </ol>
    <li>four</li>
</ol>
展开摘要

我希望得到以下结果：

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

相反，这是我看到的（编号错误）：

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three <!-- this is where it goes wrong, when going back to the parent -->
  2.1 three.one
  2.2 three.two
    2.2.1 three.two.one
    2.2.2 three.two.two
2.3 four

我不知道，有谁看到哪里出了问题？

这是一个JSFiddle：http : //jsfiddle.net/qGCUk/2/

html  css  html-lists 
— 短剑
source

Answers:

102

取消选中“规范化CSS” -http://jsfiddle.net/qGCUk/3/中 使用的CSS重置将所有列表边距和填充默认设置为0

更新 http://jsfiddle.net/qGCUk/4/- 您必须在主目录中包含子列表<li>

ol {
  counter-reset: item
}
li {
  display: block
}
li:before {
  content: counters(item, ".") " ";
  counter-increment: item
}
<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>
展开摘要

— 佐坦·托特
source
2
如何使它的索引跟在点之后1.>1.1. 1.2. 1.3.等？
— 2014年
2
只要确保修复了css选择器，就不会影响导航列表。
— Okomikeruko
@Okomikeruko“修复CSS选择器”是什么意思？因为我恰好遇到了您提到的问题-这个技巧不仅影响了我要使用的编号列表，还影响了HTML中的其他列表。：-\没关系：Moshe Simantov的答案解决了这个问题。:)
— antred
1
@antred元素属性类似于，id并class允许您使用选择器定义特定于这些元素的css。如果您使用的毯子li，ul，ol等，则CSS将影响它的所有实例。但是，如果将元素设置为<ol class="cleared">，将css选择器设置为ol.cleared，则不会ol不必要地影响其他元素。
— Okomikeruko
64

使用此样式仅更改嵌套列表：

ol {
    counter-reset: item;
}

ol > li {
    counter-increment: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}
— 莫西·西曼托夫（Moshe Simantov）
source
2
大！为我开箱即用！户田
— 10
3
这是最好的答案，因为它也有一个带点的第一层，并插入了内容。
— Martin Eckleben
如果我添加font-weight: bold到ol ol > li:before嵌套列表的计数器是，bold但它不构成第一级列表的计数器bold？
— Sushmit Sagar，
14

看一下这个 ：

http://jsfiddle.net/PTbGc/

您的问题似乎已解决。

我会看到什么（在Chrome和Mac OS X下）

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

我是怎么做到的

代替 ：

<li>Item 1</li>
<li>Item 2</li>
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>

做：

<li>Item 1</li>
<li>Item 2
   <ol>
        <li>Subitem 1</li>
        <li>Subitem 2</li>
   </ol>
</li>
— 卡梅利恩博士
source
7

这是一个很好的解决方案！使用一些其他CSS规则，您可以像设置MS Word大纲列表一样对其进行格式设置，并在其第一行缩进一行：

OL { 
  counter-reset: item; 
}
LI { 
  display: block; 
}
LI:before { 
  content: counters(item, ".") "."; 
  counter-increment: item; 
  padding-right:10px; 
  margin-left:-20px;
}
— 混沌怪胎
source
2
这种方法的问题是您无法复制列表编号。因此，如果您复制大量列表，它将没有数字
— -Rohit
1

我最近遇到类似的问题。解决方法是将有序列表中li项目的显示属性设置为list-item，而不是display block，并确保ol的display属性不是list-item。即

li { display: list-item;}

这样，html解析器会将所有li视为列表项并为其分配适当的值，并根据您的设置将ol视为内联块或块元素，并且不会尝试将任何计数值分配给它。

— Babatunde Calebs
source
这将重复编号。
— TylerH
0

Moshe的解决方案很棒，但是如果您需要将列表放在内，则问题可能仍然存在div。（阅读：CSS计数器在嵌套列表上重置）

这种样式可以防止该问题：

ol > li {
    counter-increment: item;
}

ol > li:first-child {
  counter-reset: item;
}

ol ol > li {
    display: block;
}

ol ol > li:before {
    content: counters(item, ".") ". ";
    margin-left: -20px;
}
<ol>
  <li>list not nested in div</li>
</ol>

<hr>

<div>
  <ol>
  <li>nested in div</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
  </ol>
</div>
展开摘要

您也可以将计数器重置设置为li:before。

— saboshi69
source
如果我不想.在嵌套列表中尾随在根列表中怎么办？
— Sushmit Sagar，
0

经过其他答案后，我想到了这一点，只需将类nested-counter-list应用于根ol标记：

SASS代码：

ol.nested-counter-list {
  counter-reset: item;

  li {
    display: block;

    &::before {
      content: counters(item, ".") ". ";
      counter-increment: item;
      font-weight: bold;
    }
  }

  ol {
    counter-reset: item;

    & > li {
      display: block;

      &::before {
        content: counters(item, ".") " ";
        counter-increment: item;
        font-weight: bold;
      }
    }
  }
}

CSS代码：

ol.nested-counter-list {
  counter-reset: item;
}
ol.nested-counter-list li {
  display: block;
}
ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}
ol.nested-counter-list ol {
  counter-reset: item;
}
ol.nested-counter-list ol > li {
  display: block;
}
ol.nested-counter-list ol > li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}


ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}

ol.nested-counter-list ol>li {
  display: block;
}

ol.nested-counter-list ol>li::before {
  content: counters(item, ".") " ";
  counter-increment: item;
  font-weight: bold;
}
<ol class="nested-counter-list">
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>
展开摘要

如果您需要.在嵌套列表的末尾添加尾随，请使用以下命令：

ol.nested-counter-list {
  counter-reset: item;
}

ol.nested-counter-list li {
  display: block;
}

ol.nested-counter-list li::before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-weight: bold;
}

ol.nested-counter-list ol {
  counter-reset: item;
}
<ol class="nested-counter-list">
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>
展开摘要

— 萨什米特·萨加尔
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.