8

リスト間でカウンター値がリセットされない複数の「古い」リストが必要です。別の言い方をすれば、2 番目のリストの最初の「li」のカウンターを、前のリストの最後の要素のカウンター値より 1 つ大きくしたいということです。これを行うCSSマジックはありますか?

4

2 に答える 2

3

Suの答えは機能しますが、それほど手荒くする必要はありません。上部のカウンターをリセットするだけで、どこで使用しても増加します。

body {
  counter-reset: item;
}

li {
  display: block;
}

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

この例を参照してください

于 2016-05-02T15:46:41.813 に答える
2

CSSだけでは十分ではありません。カウンターをある程度制御できます(サポートはかなり良いです) が、動作は静的です。したがって、これは機能します：

<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 つのリストを次々にドロップして、2 番目のリストがもう一方の中断したところから自動的に取得されるようにすることはできません (2 番目の CSS ルールの「3」を参照してください)。ただし、少し創造性を働かせればcounter-reset、PHP やサイトの構築に使用しているものでスタイリングをラップすることができます。もちろん、これはあなたの状況の詳細に依存します。

于 2013-01-22T22:35:22.390 に答える