我正在将一个包含数千个页面的网站转换为使用CSS计数器而不是标准HTML列表表示形式。该项目的性质使更改CSS而不是HTML变得非常容易。该网站使用许多不同种类的列表,其中一些使用start
级别的ol
属性和/或value
级别的li
属性以继续上一个列表列出和/或跳过值。
到目前为止,我已经能够成功定位不同的列表,并为它们提供我想要的所有自定义列表样式,甚至可以使用:before
和attr(start)
更改编号列表的attr(value)
内容中的计数器a
。我仍然不知道是什么时候当我需要一个字母列表而不是<ol class="lower-alpha" start="2">
<li>Explain...</li>
<li>Describe...</li>
<li value="5">Calculate...</li>
</ol>
或跳过一个值时,如何将这些数值转换成字母。
ol.lower-alpha {
list-style: none;
counter-reset: special-little-letters;
& > li {
list-style: none;
&:before {
content: counter(special-little-letters,lower-alpha);
}
counter-increment: special-little-letters;
}
&[start] {
counter-reset: special-little-letters attr(start); /* doesn't work */
}
& > li[value]:before {
counter-reset: special-little-letters attr(value); /* doesn't work */
content: counter(special-little-letters,lower-alpha)
}
}
b
我想要一个字母列表,该列表包含c
,e
,a
。检查结果时,我得到b
,c
,LS.Region = 'euw1'
AND DateTime = '2019-06-14 00:00:00'
OR DateTime = '2019-06-13 00:00:00'
and LS.Region = 'euw1'
和错误“无效的属性值”。
答案 0 :(得分:0)
如果您希望计数器从b
开始,则需要在ol.lower-alpha
上增加计数器。然后,如果要跳过d
的{{1}}属性,只需在value
中再次调用counter-increment
。
还要注意,将属性应用于ol.lower-alpha>li[value]:before
是无效的语法,因此您不会看到该规则生效。我已从以下示例中将其删除。
counter-reset
ol.lower-alpha {
list-style: none;
counter-reset: special-little-letters;
counter-increment: special-little-letters;
}
ol.lower-alpha>li {
list-style: none;
counter-increment: special-little-letters;
}
ol.lower-alpha>li:before {
content: counter(special-little-letters, lower-alpha);
}
ol.lower-alpha[start] {
counter-reset: special-little-letters;
}
ol.lower-alpha>li[value]:before {
counter-increment: special-little-letters;
}