使用 CSS 列表计数器的父子列表样式类型不同的问题

Question

我正在尝试使用 CSS 计数器重置功能在网站上进行编号。第一级应该是常规十进制（例如1、2、3、4），而子列表应该是大写罗马（例如I、II、III、IV等）

这是我的 HTML 标记

<div class="sample">
    <ol>
        <li>Nullam quam purus, bibendum vitae pulvinar id, facilisis at libero. Morbi porta, velit id consectetur sodales varius. felis metus venenatis nibdimentum varius nibh ligula gravida ex. Duis interdum massa quis dolor lobortis, non mattis libero condimentum. Suspendisse tincidunt tincidunt mollis. Vivamus volutpat lacus eget sodales varius. Quisque iaculis fermentum orci, non condimentum orci auctor id.</li>
        <li>Nullam quam purus, bibendum vitae pulvinar id, facilisis at libero. Morbi porta, velit id consectetur sodales varius. felis metus venenatis nibdimentum varius nibh ligula gravida ex. Duis interdum massa quis dolor lobortis, non mattis libero condimentum. Suspendisse tincidunt tincidunt mollis. Vivamus volutpat lacus eget sodales varius. Quisque iaculis fermentum orci, non condimentum orci auctor id.
            <ol>
                <li>Nullam quam purus, bibendum vitae pulvinar id, facilisis at libero. Morbi porta, velit id consectetur elementum, felis metus venenatis.</li>
                <li>Nullam quam purus, bibendum vitae pulvinar id, facilisis at libero. Morbi porta, velit id consectetur elementum, felis metus venenatis.</li>
                <li>Nullam quam purus, bibendum vitae pulvinar id, facilisis at libero. Morbi porta, velit id consectetur elementum, felis metus venenatis.</li>
            </ol>
        </li>
    </ol>
</div>

下面是 CSS 样式：

.sample ul,
.sample ol {
    margin-left: 0;
    padding-right: 0;
    list-style-type: none;
    counter-reset: step-counter;
}
.sample ul > li,
.sample ol > li {
    counter-increment: step-counter;
    position: relative; 
    padding-left: 27px;
    margin-bottom: 30px;
}
.sample ul > li:before,
.sample ol > li:before {
    content: counter(step-counter, disc );
    position: absolute;
    left: 0;
}
.sample ul ul > li:before,
.sample ol ol > li:before {
    content: counters(step-counter, disc );
}
.sample ul > li:before {
    font-size: 24px;
    line-height: 24px;
}

.sample ol > li:before {
    content: counter(step-counter, decimal );
}

.sample ol ol > li:before {
    content: counters(step-counter, upper-roman ) ".";
}

我无法让它按预期工作，因为子级别仍显示十进制数字。我哪里弄错了？

我在这里创建了一个小提琴 - https://jsfiddle.net/ajaxthemestudios/v6w1gkpt/4/

Answer 1

您的代码将counters 更改为counter 时出现语法错误

改变

.sample ol ol > li:before {
content: counters(step-counter, upper-roman ) ".";
}

进入

.sample ol ol > li:before {
content: counter(step-counter, upper-roman ) ".";
}