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>

ステップクラスのリストアイテムを通常のフォントサイズの2倍にするために、いくつかのcssを作成しました。これを実現するために：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にのみ適用する場合は、直接子孫 CSS セレクターを使用します。liol.step

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 に答える