如何将 ol 的列表编号更改为这样

Question

我试图让我的列表编号看起来像这样：

这是我当前的代码： CSS：

ul > ol > li::before > li::marker {
    font-weight: 700;
    position: absolute;
    left: 160px;
    content: counter(ol-counter);
    counter-increment: ol-counter;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(13, 89, 85);
    color: white;
    border-radius: 50%;
    width: 30px;
    height: 30px
}

HTML 列表：

        <ul>
            <li>
                <ol>                   
                    <li>Bugatti Chiron Supersport 300+</li>
                    <br>
                    <li>Hennessey Venom F5</li>
                    <br>
                    <li>SSC Tuatara</li>
                    <br>
                    <li>Rimac Nevera</li>
                    <br>
                    <li>McLaren Speedtail</li>
                    <br>
                    <li>Koenigsegg Regera</li>
                    <br>
                    <li>Aston Martin Valkyrie</li>
                    <br>
                    <li>Pagani Huayra</li>
                    <br>
                    <li>Lamborghini Aventador SVJ</li>
                    <br>
                    <li>Koenigsegg Jesko Absolut (In theory it should be number 1.)</li>
                </ol>
            </li>
         <ul>

为什么这不起作用？

Answer 1

你的CSS完全错误。你不会改变任何东西的风格。

li::before > li::marker

将选择

::marker

的

<li>

，即位于

::before

的

<li>

内部。这是没有意义的。我建议您阅读有关 CSS 选择器的this 参考。例如，这就是我在您的情况下选择它们的方式：

ol li::before, ol li::marker { }