是否可以指定一个有序列表的起始号码?
我有一个有序的列表,我希望最初的数字是6.我发现这是HTML 4.01 支持 (现已弃用)。 在这个规范中,他们说你可以使用CSS指定起始整数。 (而不是start
属性)
你将如何指定CSS的起始数字?
如果您需要在特定时间点启用有序列表(OL)的function,则必须将doctype指定为HTML 5; 这是:
<!doctype html>
使用该文档types,在有序列表上设置start
属性是有效的。 如:
<ol start="6"> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ol>
在HTML5中 ,我们不会废弃<ol start="">
,所以我会继续使用它,不pipeHTML4.01是什么。
start="number"
糟糕,因为它不会根据之前的编号自动更改。
另一种可能适合更复杂需求的方法是使用counter-reset
和counter-increment
。
问题
说你想要这样的事情:
1. Item one 2. Item two Interruption from a <p> tag 3. Item three 4. Item four
你可以在第二个ol
的第三个里面设置start="3"
,但是现在你需要在每次向第一个ol
添加一个项目的时候改变它
解
首先,让我们清楚我们目前编号的格式。
ol { list-style: none; }
我们将每个李显示柜台
ol li:before { counter-increment: mycounter; content: counter(mycounter) ". "; }
现在我们只需要确保计数器只在第一个ol
而不是在第一个ol
上复位。
ol:first-of-type { counter-reset: mycounter; }
演示
http://codepen.io/ajkochanowicz/pen/mJeNwY
现在我可以添加任意多个项目到列表中,编号将被保留。
1. Item one 2. Item two ... n. Item n Interruption from a <p> tag n+1. Item n+1 n+2. Item n+2 ...
正如其他人所build议的,可以使用ol
元素的start
属性。
或者,可以使用li
元素的value
属性。 这两个属性在HTML 4.01中都被标记为不赞成使用,而在HTML 5( ol
和li
)中则不使用。
<ol start="-2"> <li>Alpha</li> <li>Beta</li> <li value="10">Gamma</li> <li>Delta</li> </ol>
我很惊讶,我无法在这个线程中find答案。
我find了这个来源 ,我总结如下:
要使用CSS而不是HTML设置有序列表的起始属性,可以使用counter-increment
属性,如下所示:
ol { list-style: none; counter-increment: start 3; } li:before { content: counter(start, lower-alpha) ") "; counter-increment: start; }
counter-increment
似乎是0索引,所以得到一个从4开始的列表,使用3
。
对于下面的HTML
<ol> <li>Buy milk</li> <li>Feed the dog</li> <li>Drink coffee</li> </ol>
我的结果是
d) Buy milk e) Feed the dog f) Drink coffee
看看我的小提琴
另请参阅W3维基的参考资料