使用 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 ) ".";
}

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

我在这里创建了一个 fiddle - 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 ) ".";
}

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

Issues with different list style type for Parent and child using CSS List Counter

html

css

css-counter