1

我有以下 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;
}

那么我必须做些什么来“重置”我的嵌套列表并让它们表现得很好？

提前致谢 ！

4

1 回答 1

0

如果您希望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;
}
于 2013-03-15T16:15:22.960 回答