css - 嵌套时重置 css 列表计数和样式

Question

我有以下 html 代码(已简化

<ol class="step">
<li><p>some content</p></li>
<li><p>some content</p>
    <ul class="bull">
   <li><p>some nested content</p></li>
   <li><p>some nested content</p></li>
   <li><p>some nested content</p></li>
</ul>
</li>
<li><p>some content</p></li>
</ol>

我创建了一些 css 来使 step 类的列表项比正常字体大小大两倍。我已经使用 :before 类来实现这一点，并且在我的树中有一个嵌套列表(有序或无序)之前，它一切正常。

出于某种原因，我无法“重置”级联样式，因此欢迎就如何正确执行此操作提出任何建议。

这是我的 css，如果你使用它，你会注意到 ul 也有很大的数字，而实际上我只想再次拥有基本的简单光盘。

ol.step{
    counter-reset: li;
    list-style: none;
    -webkit-padding-start: 20px;
}

ol.step li:before{
    content: counter(li);
    counter-increment: li;
    font-size:  200%;
    font: Arial;
    position: absolute; 
    left: -20px;
    padding-top : 1px;
}

ol.step li{
display: block;
position: relative;
padding-left : 10px;
padding-top : 1px;
}

ul.bull {
    list-style-type: disc;
    counter-reset: li;
} 

那么我该怎么做才能“重置”我的嵌套列表并让它们表现良好？

提前致谢!

Answer 1

如果您希望 li 样式仅应用于 ol.step 下的 li，请使用直接后代 CSS 选择器:

ol.step > li:before {
    content: counter(li);
    counter-increment: li;
    font-size:  200%;
    font: Arial;
    position: absolute; 
    left: -20px;
    padding-top : 1px;
}

ol.step > li{
    display: block;
    position: relative;
    padding-left : 10px;
    padding-top : 1px;
}