Question

在Ol tag的start属性被弃用之前，我正在尝试做一些过去非常简单的事情。我只想在我的页面中有一对有序列表，但是开始编写第一个完成的第二个列表的编号。类似的东西：

1. do stuff
2. do stuff

Here's a paragraph

3. do stuff

我已经看到counter-reset和counter-increment CSS属性应该可以实现这一点，但我无法让它工作。到目前为止，这是我的代码：

<html>
<head>
  <style type="text/css">
    ol li { counter-increment: mycounter; }
    ol.start { counter-reset: mycounter; }
    ol.continue { counter-reset: mycounter 2; }
  </style>
</head>

<body>
  <ol class="start">
    <li>You can't touch this</li>
    <li>You can't touch this</li>
  </ol>
  <p>STOP! Hammer time.</p>
  <ol class="continue">
    <li>You can't touch this</li>
  </ol>
</body>
</html>

说实话，即使有效，也不理想。我不想指定ol.continue选择器中第一个列表所达到的数字。

我做错了什么？实现所需效果所需的最小HTML / CSS组合是什么？

提前致谢...：）

我最终采用的解决方案
这是我最终使用的HTML和CSS代码。感谢Felix让我到那儿。还必须提到Lee也提供了一个有趣的jQuery替代方案。

<html>
<head>
  <style type="text/css">
    ol.split { list-style-type: none; }
    ol.split li:before
    {
      counter-increment: mycounter;
      content: counter(mycounter) ".\00A0\00A0";
    }
    ol.split li
    {
      text-indent: -1.3em;
    }
    ol.start { counter-reset: mycounter; }
  </style>
</head>

<body>
  <ol class="split start">
    <li>You can't touch this</li>
    <li>You can't touch this</li>
  </ol>
  <p>STOP! Hammer time.</p>
  <ol class="split">
    <li>You can't touch this</li>
  </ol>
</body>
</html>

警告：事实证明，这个'解决方案'在IE8的兼容性视图中不起作用（也可能在其他版本/浏览器中）。如果这不打扰你，那很好。：）

Answer 1

如上所述，您需要:before和content，但您还需要禁用默认列表编号。这是你固定的CSS：

ol.start { 
    counter-reset: mycounter; 
}
ol.start li, ol.continue li {
    list-style: none;
}
ol.start li:before, ol.continue li:before { 
    content: counter(mycounter) ". "; 
    counter-increment: mycounter;
}

您无需重置ol.continue的计数器，只需继续使用自定义计数器即可。上述代码可确保该计数器仅用于ol.start和ol.continue列表。

Answer 2

很抱歉这个帖子没问题，但是当我遇到这个问题时它出现了问题。对于OP问题更容易解决的问题如下：

<ol start="X">

其中X是您要继续的列表的值，因此在他的示例中：

<ol>
    <li>You can't touch this</li>
    <li>You can't touch this</li>
</ol>
  <p>STOP! Hammer time.</p>
<ol start="3">
    <li>You can't touch this</li>
</ol>

Answer 3

start属性在html5中有效。我会用它。

http://w3c.github.io/html/grouping-content.html#the-ol-element

同样http://dev.w3.org/html5/spec/Overview.html#the-ol-element声明所有浏览器仍然支持它。你必须测试以确定我猜。

一些jquery可以动态设置start属性，如果你是那种东西..

  // assuming all your ol's have the class mylist
  $(function(){
    var counter=1;
    $('ol.mylist').each(function(){
      $this = $(this);
      $this.attr('start',counter);
      counter += $(this).find('li').length;
    });
  });

Answer 4

Opera DevNet有一个很好的例子来说明这个用例：http://devfiles.myopera.com/articles/501/counters-start-example.html（这是article about counters的一部分）

所以你的代码看起来应该是这样的：

<html>
<head>
  <style type="text/css">
    ol li { counter-increment: mycounter; }
    ol.start { counter-reset: mycounter; }
    ol.continue { /*counter-reset: mycounter 2; */}
    ol li { 
        counter-increment: mycounter;
        list-style-type: none;
    }
    ol li:before { content: counter(mycounter) ". "; }
  </style>
</head>

<body>
  <ol class="start">
    <li>You can't touch this</li>
    <li>You can't touch this</li>
  </ol>
  <p>STOP! Hammer time.</p>
  <ol class="continue">
    <li>You can't touch this</li>
  </ol>
</body>
</html>

但是，正如李提到的那样，ol @ start似乎不再被弃用，我个人更喜欢这种方法，因为这不仅是一种造型，而且还是标记中的语义问题。

Answer 5

您还需要在带有引用计数器的内容标记的规则之前使用：

见这里：http://www.w3schools.com/css/pr_gen_counter-reset.asp

Answer 6

以下是OP设计的答案的不同版本。如果您有超过9个列表项，它会使文本对齐。该模式可以扩展到超过99个项目，超过999个项目等。

ol.split { list-style-type: none; }
ol.split li.less-than-ten:before {
    counter-increment: mycounter;
    content: counter(mycounter) ".\00A0\00A0\00A0\00A0";
}

ol.split li.ten-or-greater:before {
    counter-increment: mycounter;
    content: counter(mycounter) ".\00A0\00A0";
}
ol.split li {
    display: list-item;
    text-indent: -2em;
}

ol.start { counter-reset: mycounter; }

要使用此功能，请将类“start”和“split”放在第一个ol上。将类“拆分”放在要包含在连续编号中的后续ol上。在1日到9日的li标签上，把班级“小于10”。在第10到第99个li标签上，将类别设置为“十或更大”。如果要将模式应用于第100到第999个li标签，则必须创建如下内容：

ol.split li.more-than-99:before {
    counter-increment: mycounter;
    content: counter(mycounter) ".\00A0\00A0\00A0\00A0\00A0\00A0";
}

我相信6“\ 00A0”标签就足够了。你可能不得不使用“\ 00A0”标签的数量和文本缩进的数字来使所有文本排成一行。

Answer 7

在尝试回答我自己的问题时，我偶然发现了另一种方法（Remove indent for element within an ordered list <ol>）。

我应该注意到这里的讨论帮助我回答了我的问题，尽管他们有不同的问题，他们有类似的答案;所以，感谢那些为此主题的讨论做出贡献的人们。

我的解决方案，不是将类归于HTML的列表部分，而是将类归类为将<ol>元素分解为两个的元素。我使用了班级名mid-ol。然后可以在CSS中使用ol + .mid-ol + ol的组合。

对我而言，这比更改<ol>元素的字符更令人满意，因为列表可能存在并且尽管存在破坏元素但仍然存在。例如，可以移动，移除破坏元素等，但是<ol>需要很少的维护。

为了不在两个地方重复讨论，我会让任何感兴趣的人仔细阅读另一个帖子中的讨论和示例代码。

Answer 8

在关闭段落之前，是否可以只将段落嵌套在列表项中？

  <ol>
    <li>You can't touch this</li>
    <li>You can't touch this
      <p>STOP! Hammer time.</p>
      </li>
    <li>You can't touch this</li>
  </ol>

Answer 9

使用 useCallback 标签的 li 属性和未标记的列表元素可以实现类似的目的。

https://www.w3schools.com/tags/att_li_value.asp

在这种方法中，插入文本变成了一个未标记的列表项。这不是惯用的，并且会做出一些关于边距和对齐的特定于列表的默认值，以及什么不是。然而，这惯用地将“稀疏”列表保持为单个标签。与实际使用两个列表和使用 value 标签的 ol 属性模拟单个列表相比，这是否会使解决方案更好或更差 - 由读者决定。

start

您还可以使用 <ol> <li>You can't touch this <li>You can't touch this <li style="list-style: none"><b>STOP!</b> Hammer time. <li value="3">You can't touch this <li>This neither </ol> 或 <br/> 或 CSS 添加垂直轮廓，对于任何其他添加的视觉提示也是如此。

CSS 示例：

<p>

带有 HTML 标签的示例：

  <ol>
    <li>You can't touch this
    <li>You can't touch this
    
    <li style="list-style: none; margin-top:10px; margin-bottom: 10px"><b>STOP!</b> Hammer time.
      
    <li value="3">You can't touch this
    <li>This neither
  </ol>

Answer 10

今天您可以使用原生的 start 属性 - 请在此处查看 https://www.w3schools.com/tags/att_ol_start.asp

<ol class="start" start="1">
    <li>You can't touch this</li>
    <li>You can't touch this</li>
  </ol>
  <p>STOP! Hammer time.</p>
  <ol class="continue" start="3">
    <li>You can't touch this</li>
  </ol>

如何开始新列表，继续上一个列表中的编号？

10 个答案: