start在ol标签的属性被弃用之前,我正在尝试做一些过去非常简单的事情.我只想在我的页面中有一对有序列表,但是开始编写第一个完成的第二个列表的编号.就像是:
1. do stuff
2. do stuff
Here's a paragraph
3. do stuff
我已经看到counter-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>
说实话,即使这样有效,也不会是理想的.我不想指定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的兼容性视图中不起作用(也可能在其他版本/浏览器中).如果这不打扰你,那很好.:)
Fel*_*ing 19
如前所述,您需要: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列表.
小智 15
对不起这个线程,但是当我遇到这个问题时,它变得很高.解决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>
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;
});
});