カウンタをリセットせずにリスト内のCSSカウンタを使用するにはどうすればよいですか？

カウンタの値がでなく、リスト間でがリセットされているところで複数の "ol"リストを作成したいとします。これを言うもう一つの方法は、2番目のリストの最初の "li"のカウンタを、前のリストの最後の要素のカウンタの値よりも1つ高くしたいということです。これを行うCSSの魔法がいくつかありますか？カウンタをリセットせずにリスト内のCSSカウンタを使用するにはどうすればよいですか？

出典

2013-01-22 Paul Hoffman

CSSだけでは不十分です。 control over counters（およびsupport is pretty good）を提供していますが、その動作にはまだ静的です。だから、これは動作します：

<html> 
<head> 
<style> 
    #list-one { 
     counter-reset : item; 
    } 
    #list-two { 
     counter-reset : item 3; 
    } 
    li { 
     display : block; 
    } 
    li:before { 
     display : inline-block; 
     content : counter(item) ". "; 
     counter-increment : item; 
    } 
</style> 
</head> 
<body> 
    <ol id="list-one"> 
     <li>One</li><li>Two</li><li>Three</li> 
    </ol> 
    <ol id="list-two"> 
     <li>Four</li><li>Five</li><li>Six</li> 
    </ol> 
</body> 
</html>

を...あなただけお互いの後に二つのリストをドロップし、二番目のを持つことはできません自動的に他の中断したところ（第2 CSSルールで「3」を参照してください拾います）。しかし少しの創造力で、おそらくcounter-resetのスタイリングを少しのPHPやあなたのサイトを構築するために使っているもので包み込むことができます。もちろん、あなたの状況の詳細に依存しています。

出典

2013-01-22 22:35:22

Su's answerが機能する一方で、重すぎる必要はありません。一番上のカウンターをリセットするだけで、どこでも使用できれば増加します。

body { 
    counter-reset: item; 
} 

li { 
    display: block; 
} 

li:before { 
    display: inline-block; 
    content: counter(item) ". "; 
    counter-increment: item; 
}

は全体の正解だこのexample

出典

2016-05-02 15:46:41

を参照してください。 –

カウンタをリセットせずにリスト内のCSSカウンタを使用するにはどうすればよいですか？

答えて

関連する問題