html - 我可以对具有 start 属性值的有序列表进行样式编号吗?
问题描述
这是问题所在:
我有一个具有如下属性的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
的值而不是序列化有序列表上的编号?但是,没有 JavaScript 可以用于此。start
1
解决方案
您可以使用您设置的 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>
推荐阅读
- odoo - 安装 odoo12 社区后,我收到导入错误
- ios - 将 JSON 数据绑定到 TableView 和 CollectionView
- hybris - 为什么不建议将 SAP Commerce Cloud 配方用于生产,但设置说明通常会提到使用配方?
- python - 如何解决 python 中的“ValueError: I/O operation on closed file”错误,该错误在创建新文件并写入文件时显示
- python - 迭代字典列表并从另一个列表中分配递增的值
- amazon-web-services - 如何在 Amazon Cognito 中识别唯一的移动设备 ID
- mysql - 在 Kubernetes 中为 MySQL 生产容器设置复制
- react-native - 在反应原生平面列表中滑动行剂量工作
- c# - 在 xsd 生成的数据集类的对象实例化期间出现错误
- python - Twitter 标签搜索结果 - 超过 7 天