Question

我正在将一个包含数千个页面的网站转换为使用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)
    }
}

我想要一个字母列表，该列表包含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'和错误“无效的属性值”。

Answer 1

如果您希望计数器从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;
}

CSS是否可以为自定义Alpha计数器解释ol和li标签的start和value属性？

1 个答案: