我正在转换一个包含数千页的网站,以使用CSS计数器而不是标准的HTML列表表示。该项目的性质使得更改CSS而不是HTML变得更加容易。该网站使用许多不同类型的列表,其中一些在ol
级别使用 start
属性和/或在li
级别使用 value
属性来继续以前的列表和/或跳过值。
到目前为止,我已经能够成功地定位不同的列表并为他们提供我想要的所有自定义列表样式,甚至可以使用 attr(start)
和 attr(value)
更改编号列表:before
内容中的计数器。我仍然无法弄清楚的是,当我需要一个字母列表从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
和错误"属性值无效"。
如果您希望计数器从 b
开始,则需要在 ol.lower-alpha
上递增计数器。然后,如果要跳过value
属性的d
,只需在 ol.lower-alpha>li[value]:before
中再次调用counter-increment
即可。
另请注意,将属性应用于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;
}
<ol class="lower-alpha" start="2">
<li>Explain...</li>
<li>Describe...</li>
<li value="5">Calculate...</li>
</ol>