如何开始一个新的列表，从上一个列表继续编号？ [英] How to start a new list, continuing the numbering from the previous list?
问题描述
我试图做一些以前很容易，在开始属性的ol标签已被弃用。我只想在我的页面中有一对有序列表，但开始第二个列表的编号，第一个完成。像：
1。做东西
2.做东西
这里是一个段落
3.做东西
我看到 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>您无法触摸此< / li>
< li>您无法触摸此< / li>
< / ol>
< p>停止！锤击时间。< / p>
< ol class =continue>
< li>您无法触摸此< / li>
< / ol>
< / body>
< / html>
说实话，即使有效，也不太理想。我不想在我的 ol.continue 选择器中指定第一个列表达到的数字。
我做错什么？
提前感谢...：）
我最终采用的解决方案
这是我最后使用的HTML和CSS代码。感谢Felix让我在那里。还必须提到，Lee还提供了一个有趣的jQuery替代品。
< html&，但您还需要禁用默认列表编号。这是你固定的CSS：
< 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>您无法触摸此< / li>
< li>您无法触摸此< / li>
< / ol>
< p>停止！锤击时间。< / p>
< ol class =split>
< li>您无法触摸此< / li>
< / ol>
< / body>
< / html>注意：这个'解决方案'在IE8的兼容性视图中不起作用（可能是这样的）其他版本/浏览器）。如果这不打扰你，伟大的。 ：解决方案如前所述，您需要
：beforecode> contentol.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列表。 p>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:1. do stuff 2. do stuff Here's a paragraph 3. do stuffI've seen that the
counter-resetandcounter-incrementCSS properties should be able to achieve this, but I can't get it working. Here's my code so far:<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.What am I doing wrong? What's the minimal HTML/CSS combination required to achieve the desired effect?
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> <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>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. :)
解决方案As already said, you need
:beforeandcontent, but you also need to disable the default list numbering. This is your fixed 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; }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 theol.startandol.continuelists.这篇关于如何开始一个新的列表，从上一个列表继续编号？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
