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，使步骤类的列表项比普通字体大两倍。我已经使用了：before class来实现这一点，并且一切正常，直到我有一个嵌套列表，在我的树中有序或无序。

出于某种原因，我无法“重置”级联风格，因此欢迎任何有关如何正确操作的建议。

这是我的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样式仅适用于li下的ol.step，请使用直接后代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;
}

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

1 个答案: