css - Bootstrap 5. list-group-numbered - 我无法更改为 list-style-type: lower-roman

Question

我正在尝试遵循此处的文档：

https://getbootstrap.com/docs/5.0/components/list-group/

“数字是由 上的计数器重置生成的，然后使用 ::before 伪元素设置样式并放置在

具有反增量和内容。”

<ol class="list-group list-group-numbered contract">
    <li class="list-group-item border-0 contract">
    copy
    </li>
    <li class="list-group-item border-0 contract">
    more copy 
    </li>
</ol>

我刚刚搬到 BS 5.0，所以这可能是我的困惑。

CSS 可以改变字体大小/颜色，但不能改变样式。

li.contract::before {
    font-size: 2.25rem !important;
    color: #AED6DE !important;
    list-style-type: lower-roman !important;
}

我在 BS 5.0 中找不到任何编号列表的示例，只有 BS 文档中的简要说明。

任何示例/指导将不胜感激。

Answer 1

将属性添加content: counter(section, lower-roman) ". ";到您的li.contract::before类或li.list-group-item::before类中，如下所示：

li.list-group-item::before {
    font-size: 2.25rem;
    color: #AED6DE;
    content: counter(section, lower-roman) ". ";
}

而不是使用该list-style-type:属性。

说明：这是因为他们在编号部分的Bootstrap 5.0 文档中提到（您在正确的轨道上，但它有点晦涩），“数字是通过在 上的计数器重置生成的<ol>，然后设置样式并放置具有反增量和内容::before的伪元素。” <li>因此，计数器需要在<li>css 中设置样式/指定，而不是直接在or上指定list-style-type:属性。计数器 css通过使用名称初始化它并使用属性在（父元素）上将其设置为零，将计数器添加到<ol><li><ol>counter-reset: section<li>content:属性，然后用您用来使颜色和大小起作用的相同想法对其进行样式设置（在/选择 中<li>，在这种情况下，计数器名称是部分 - 我在检查时发现）。