时间戳

首页 > 解决方案 > CSS有没有办法解释自定义alpha计数器的`ol`和`li`标签的`start`和/或`value`属性？

html - CSS有没有办法解释自定义alpha计数器的`ol`和`li`标签的`start`和/或`value`属性？

问题描述

我正在将一个拥有数千页的网站转换为使用 CSS 计数器而不是标准的 HTML 列表表示。该项目的性质使得更改 CSS 而不是 HTML 变得容易得多。该站点使用许多不同类型的列表，其中一些使用级别的start属性ol和/或级别的value属性li来继续以前的列表和/或跳过值。

到目前为止，我已经能够成功地定位不同的列表，并为它们提供我想要的所有自定义列表样式，甚至使用and更改: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和错误“无效的属性值”。

标签： htmlcssattributescss-counter

解决方案

如果您希望计数器从 开始b，则需要在 上增加计数器ol.lower-alpha。然后，如果您想跳过d该value属性，您只需counter-increment再次调用 in 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;
}
<ol class="lower-alpha" start="2">
  <li>Explain...</li>
  <li>Describe...</li>
  <li value="5">Calculate...</li>
</ol>

推荐阅读