这是问题所在:
我有一个ol li
有序列表,其中包含start
属性,如下所示:
.custom {
margin: 0;
padding: 0;
list-style-type: none;
}
.custom li {
counter-increment: step-counter;
margin-bottom: 10px;
}
.custom li::before {
content: counter(step-counter);
margin-right: 5px;
font-size: 80%;
background-color: rgb(0,200,200);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}
<ol start="6" class="custom">
<li>This is the sixth item</li>
<li>This is the seventh item</li>
<li>This is the eighth item</li>
<li>This is the ninth item</li>
<li>This is the tenth item</li>
</ol>
我在浏览器上获得以下输出:
是否可以使用list-style
属性中的值而不是start
序列化有序列表中的1
编号?但是,没有JavaScript可用于此。
您可以使用您设置的CSS变量而不是start
来模拟这个并使用它来重置计数器。出于语义目的,您还可以保留start
属性。
.custom {
margin: 0;
padding: 0;
list-style-type: none;
counter-reset: step-counter calc(var(--start) - 1);
}
.custom li {
counter-increment: step-counter;
margin-bottom: 10px;
}
.custom li::before {
content: counter(step-counter);
margin-right: 5px;
font-size: 80%;
background-color: rgb(0, 200, 200);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}
<ol style="--start:6" start="6" class="custom">
<li>This is the sixth item</li>
<li>This is the seventh item</li>
<li>This is the eighth item</li>
<li>This is the ninth item</li>
<li>This is the tenth item</li>
</ol>
我已经为你的CSS添加了一些规则。最重要的是:
.custom{counter-reset:start 5;}
这将使列表从5 + 1 = 6开始
.custom {
margin: 0;
padding: 0;
list-style-type: none;
counter-reset:start 5;/*This*/
}
.custom li {
counter-increment: step-counter;
margin-bottom: 10px;
counter-increment: start;/*This*/
}
.custom li::before {
content:counter(start);/*This*/
margin-right: 5px;
font-size: 80%;
background-color: rgb(0,200,200);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}
<ol class="custom">
<li>This is the sixth item</li>
<li>This is the seventh item</li>
<li>This is the eighth item</li>
<li>This is the ninth item</li>
<li>This is the tenth item</li>
</ol>
li标签无权访问父属性。
这是我看到的最好的方式,使用content: attr()
.custom {
margin: 0;
padding: 0;
list-style-type: none;
}
.custom li {
counter-increment: step-counter;
margin-bottom: 10px;
}
.custom li::before {
content: attr(data-idx);
margin-right: 5px;
font-size: 80%;
background-color: rgb(0,200,200);
color: white;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}
<ol class="custom">
<li data-idx="6">This is the sixth item</li>
<li data-idx="7">This is the seventh item</li>
<li data-idx="8">This is the eighth item</li>
<li data-idx="9">This is the ninth item</li>
<li data-idx="10">This is the tenth item</li>
</ol>