vri*_*h88 110 html css html-lists
我有一个有序列表,我希望初始数字为6.我发现在HTML 4.01中支持(现已弃用).在本规范中,他们说您可以使用CSS指定起始整数.(而不是start属性)
你会如何用CSS指定起始编号？
Tra*_*vis 142
如果您需要在特定点启动有序列表(OL)的功能,则必须将您的doctype指定为HTML 5; 这是:
<!doctype html>
使用该doctype,start在有序列表上设置属性是有效的.如:
<ol start="6">
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ol>Ada*_*ant 29
start="number" 很糟糕,因为它不会根据之前的编号自动更改.
另一种可能适合更复杂需求的方法是使用counter-reset和counter-increment.
问题
说你想要这样的东西:
1. Item one
2. Item two
Interruption from a <p> tag
3. Item three
4. Item four
您可以在第二start="3"个li中设置第三个ol,但现在每次向第一个项目添加项目时都需要更改它ol
解
首先,让我们清楚我们当前编号的格式.
ol {
list-style: none;
}
我们将让每个人都展示柜台
ol li:before {
counter-increment: mycounter;
content: counter(mycounter) ". ";
}
现在我们只需要确保计数器仅在第一个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
...
小智 11
我很惊讶我无法在这个帖子中找到答案.
我找到了这个来源,我总结如下:
要使用CSS而不是HTML设置有序列表的start属性,可以使用以下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 wiki参考
正如其他人所说,可以使用元素的start属性ol.
或者,可以使用元素的value属性li.这两个属性在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>通过 HTML，使用start 属性
列表项开始计数的整数。始终为阿拉伯数字（1、2、3 等），即使编号类型为字母或罗马数字。例如，要从字母“d”或罗马数字“iv”开始对元素进行编号，请使用 start="4"。
<ol start="10">
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
</ol>通过 CSS，使用CSS 计数器：
CSS 计数器允许您根据内容在文档中的位置调整内容的外观。例如，您可以使用计数器自动对网页中的标题进行编号。本质上，计数器是由 CSS 维护的变量，其值可以通过 CSS 规则递增，以跟踪它们的使用次数。
ol {
list-style: none;
counter-reset: li 9; /* syntax: "counter name" "init value" */
}
ol li:before {
counter-increment: li; /* for every appearance, add one */
content: counter(li) ". "; /* mimic default ol list-style */
}<ol>
<li>Ten</li>
<li>Eleven</li>
<li>Twelve</li>
</ol>| 归档时间： |
|
| 查看次数： |
83498 次 |
| 最近记录： |