我可以为具有 start 属性值的有序列表设置样式编号吗?
Can I style numbering an ordered list that has a start attribute value?
这是问题所在:
我有一个 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>
我在浏览器上得到以下输出:
是否可以使用 start
属性中的值而不是 1
来序列化有序列表中的 list-style
编号?但是没有 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>
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>
我已经为您的 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>
这是我的卡顿解决方案。
在ol开头加上js x li。然后通过绝对定位并将它们扔到月球来隐藏它们。
$('ol[start]').each(function(){
var start = $(this).attr('start');
//console.log(start);
for(var i=1;i<start;i++){
$(this).prepend('<li class="hidden"></li>');
}
})
ol{
counter-reset: items;
padding:0;
padding-left: 46px;
}
ol li {
display: block;
counter-increment: items;
text-indent: -22px;
margin-bottom: 25px;
}
ol li.hidden{
visibility:hidden;
position:absolute;
left:-999vw;
}
ol li:before {
content: "0" counter(items)". ";
color:green;
display:inline-block;
width:22px;
font-size:14px;
}
ol li:nth-child(n+10):before {
content: "" counter(items)". ";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol start="4">
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ol>
这是问题所在:
我有一个 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>
我在浏览器上得到以下输出:
是否可以使用 start
属性中的值而不是 1
来序列化有序列表中的 list-style
编号?但是没有 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>
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>
我已经为您的 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>
这是我的卡顿解决方案。
在ol开头加上js x li。然后通过绝对定位并将它们扔到月球来隐藏它们。
$('ol[start]').each(function(){
var start = $(this).attr('start');
//console.log(start);
for(var i=1;i<start;i++){
$(this).prepend('<li class="hidden"></li>');
}
})
ol{
counter-reset: items;
padding:0;
padding-left: 46px;
}
ol li {
display: block;
counter-increment: items;
text-indent: -22px;
margin-bottom: 25px;
}
ol li.hidden{
visibility:hidden;
position:absolute;
left:-999vw;
}
ol li:before {
content: "0" counter(items)". ";
color:green;
display:inline-block;
width:22px;
font-size:14px;
}
ol li:nth-child(n+10):before {
content: "" counter(items)". ";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ol start="4">
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ol>