Html 如何开始一个新列表，继续上一个列表的编号？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4615500/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to start a new list, continuing the numbering from the previous list?
提问by Mal Ross
I'm trying to do something that used to be really easy before the startattribute on ol tags was deprecated. I'd just like to have a pair of ordered lists in my page, but start the numbering of the second list where the first one finished. Something like:
start在 ol 标签上的属性被弃用之前，我正在尝试做一些曾经非常简单的事情。我只想在我的页面中有一对有序列表，但从第一个完成的第二个列表开始编号。就像是：
1. do stuff
2. do stuff
Here's a paragraph
3. do stuff
I've seen that the counter-resetand counter-incrementCSS properties should be able to achieve this, but I can't get it working. Here's my code so far:
我已经看到 thecounter-reset和counter-incrementCSS 属性应该能够实现这一点，但我无法让它工作。到目前为止，这是我的代码：
<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>
To be honest, even if that worked, it wouldn't be ideal. I don't want to have to specify the number reached by the first list in my ol.continueselector.
老实说，即使这有效，也不是理想的。我不想在我的ol.continue选择器中指定第一个列表达到的数字。
What am I doing wrong? What's the minimal HTML/CSS combination required to achieve the desired effect?
我究竟做错了什么？达到预期效果所需的最小 HTML/CSS 组合是什么？
Thanks in advance... :)
提前致谢... ：）
The solution I finally adopted
Here's the HTML and CSS code I finally used. Thanks to Felix for getting me there. Must also mention that Lee offers an interesting jQuery alternative too.
我最终采用的解决方案
这是我最终使用的 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) ".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;
}
A0<ol start="X">
A0";
}
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>
Caveat: it turns out that this 'solution' doesn't work in IE8's compatibility view (and probably other versions/browsers too). If that doesn't bother you, great. :)
警告：事实证明，这个“解决方案”在 IE8 的兼容性视图中不起作用（也可能在其他版本/浏览器中）。如果这不打扰你，那太好了。:)
采纳答案by Felix Kling
As already said, you need :beforeand content, but you also need to disable the default list numbering. This is your fixed CSS:
如前所述，您需要:beforeand content，但您还需要禁用默认列表编号。这是你的固定 CSS：
<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>
You don't need to reset the counter for ol.continue, just continue to use your custom counter. The above code makes sure that the counter is only used for the ol.startand ol.continuelists.
您无需为 重置计数器ol.continue，只需继续使用您的自定义计数器即可。上面的代码确保计数器仅用于ol.start和ol.continue列表。
回答by Morkatog
Sorry for necroing this thread, but it came up high when I ran into this issue. A much easier solution to the OP's problem is the following:
很抱歉破坏了这个线程，但是当我遇到这个问题时它变得很高。OP问题的一个更简单的解决方案如下：
// 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;
});
});
Where X is the value of the list you want to continue, so in his sample:
其中 X 是您要继续的列表的值，因此在他的示例中：
<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>
回答by Lee
The start attribute is valid in html5. I would just use that.
start 属性在 html5 中有效。我只会用那个。
http://w3c.github.io/html/grouping-content.html#the-ol-element
http://w3c.github.io/html/grouping-content.html#the-ol-element
Also http://dev.w3.org/html5/spec/Overview.html#the-ol-elementStates that it is still supported in all browsers. You would have to test to be sure I guess.
另外http://dev.w3.org/html5/spec/Overview.html#the-ol-element声明它仍然在所有浏览器中受支持。你必须测试才能确定我猜。
some jquery to set the start attribute dynamically if you are into that sort of thing..
如果你喜欢那种东西，一些 jquery 来动态设置 start 属性..
<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>回答by Horst Gutmann
The Opera DevNet has a nice example for exactly this use-case available here: http://devfiles.myopera.com/articles/501/counters-start-example.html(which is part of their article about counters)
Opera DevNet 有一个很好的例子来说明这个用例：http: //devfiles.myopera.com/articles/501/counters-start-example.html（这是他们关于计数器的文章的一部分）
So your code should look somehow like this:
所以你的代码应该看起来像这样：
ol.split { list-style-type: none; }
ol.split li.less-than-ten:before {
counter-increment: mycounter;
content: counter(mycounter) ".ol.split li.more-than-99:before {
counter-increment: mycounter;
content: counter(mycounter) ".##代码##A0##代码##A0##代码##A0##代码##A0##代码##A0##代码##A0";
}
A0##代码##A0##代码##A0##代码##A0";
}
ol.split li.ten-or-greater:before {
counter-increment: mycounter;
content: counter(mycounter) ".##代码##A0##代码##A0";
}
ol.split li {
display: list-item;
text-indent: -2em;
}
ol.start { counter-reset: mycounter; }
But, as Lee mentioned, ol@start seems no longer again deprecated, I'd personally prefer that approach since this is not only a styling but also an issue of semantics in your markup.
但是，正如 Lee 所提到的，ol@start 似乎不再被弃用，我个人更喜欢这种方法，因为这不仅是一种样式，而且是标记中的语义问题。
回答by Mihai Toader
you also need to use a :before rule with a content tag that references the counter:
您还需要使用 :before 规则和引用计数器的内容标签：
see here: http://www.w3schools.com/css/pr_gen_counter-reset.asp
回答by geniebean
Can you not just nest the paragraph inside the list item before you close it?
在关闭列表项之前，您不能将段落嵌套在列表项中吗？
回答by MrSpaceman
There is another approach that I've stumbled across when trying to answer my own question (Remove indent for element within an ordered list <ol>).
在尝试回答我自己的问题时，我偶然发现了另一种方法（在有序列表 <ol> 中删除元素的缩进）。
I should note that the discussion here helped me answer my question there, although they are different questions they have similar answers; so, thank you to those contributing to the discussion on this thread for your help.
我应该注意到，这里的讨论帮助我在那里回答了我的问题，尽管它们是不同的问题，但它们有相似的答案；所以，感谢那些为该线程的讨论做出贡献的人，感谢您的帮助。
My solution, instead of attributing classes to the list parts of the HTML, attributes a class to the element which is breaking the <ol>elements in two. I used the class name mid-ol. The combination of ol + .mid-ol + olcan then be used in the CSS.
我的解决方案不是将类归因于 HTML 的列表部分，而是将类归因于将<ol>元素一分为二的元素。我使用了类名mid-ol。ol + .mid-ol + ol然后可以在 CSS 中使用的组合。
To me this was more satisfactory than changing the character of the <ol>elements, as the list may exist and persist despite the breaking element. For example, the breaking element might be moved, removed, etc., but there's then little maintenance required for the <ol>.
对我来说，这比改变<ol>元素的特征更令人满意，因为尽管存在破坏元素，但列表可能存在并持续存在。例如，破坏元素可能会被移动、移除等，但<ol>.
To not duplicate discussion in two places, I'll let anyone interested peruse the discussion and example code on the other thread.
为了不在两个地方重复讨论，我会让任何感兴趣的人仔细阅读另一个线程上的讨论和示例代码。
回答by ermSO
Here is an different version of the answer that the OP devised. It makes the text line up if you have more than 9 list items. The pattern could be extended to more than 99 items, more than 999 items, etc.
这是 OP 设计的答案的不同版本。如果您有 9 个以上的列表项，它会使文本对齐。该模式可以扩展到超过 99 个项目、超过 999 个项目等。
##代码##To use this put the classes "start" and "split" on the first ol. Put the class "split" on subsequent ol's that you want to include in the continuous numbering. On the 1st through the 9th li tags, put the class "less-than-ten". On the 10th through 99th li tags, put the class "ten-or-greater". If you want to apply the pattern to the 100th through 999th li tags, you will have to create something like this:
要使用它，请将类“开始”和“拆分”放在第一个 ol 上。将类“拆分”放在要包含在连续编号中的后续 ol 上。在第 1 到第 9 个 li 标签上，放置类“小于十”。在第 10 到 99 li 标签上，放置“十或更大”类。如果要将模式应用于第 100 个到第 999 个 li 标签，则必须创建如下内容：
##代码##I believe the 6 "\00A0" tags will be enough. You may have to fiddle with the number of "\00A0" tags and the text-indent number to make all the text line up.
我相信 6 个“\00A0”标签就足够了。您可能需要摆弄“\00A0”标签的数量和文本缩进编号，以使所有文本对齐。
