CSS 不同范圍的反增量
[英]CSS counter-increment with different scopes
問題描述
我需要在文檔的不同順序列表中創建一個連續枚舉。
HTML 是動態生成的，不能修改。
我有以下結構和CSS：
body{ counter-reset: item; } ol { list-style-type: none; } ol.instructions:not(.continue){ counter-reset: item; } li::before { counter-increment: item; content: counter(item) "."; }
<div class="col"> <ol class="instructions"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol class="instructions continue"> <li>item 4</li> <li>item 5</li> </ol> </div> <div class="col"> <ol class="instructions continue"> <li>item 6</li> <li>item 7</li> </ol> <ol class="instructions"> <li>item 8</li> <li>item 9</li> </ol> </div> <div class="col"> <ol class="instructions continue"> <li>item 10</li> <li>item 11</li> </ol> <ol class="instructions"> <li>item 12</li> <li>item 13</li> </ol> </div>
選擇器.instructions開始一個新的計數，但.instructions.continue必須繼續之前的計數。
結果應該是：
1. item 1
2. item 2
3. item 3
4. item 4
5. item 5
6. item 6
7. item 7
1. item 8
2. item 9
3. item 10
4. item 11
1. item 12
2. item 13
4 個解決方案
解決方案1
1 2020-08-12 08:12:44
請使用col div 中的所有ol 。
body{ counter-reset: item; } ol { list-style-type: none; } ol.instructions:not(.continue){ counter-reset: item; } li::before { counter-increment: item; content: counter(item) "."; }
<body> <div class="col"> <ol class="instructions"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol class="instructions continue"> <li>item 4</li> <li>item 5</li> </ol> <ol class="instructions continue"> <li>item 6</li> <li>item 7</li> </ol> <ol class="instructions"> <li>item 8</li> <li>item 9</li> </ol> <ol class="instructions continue"> <li>item 10</li> <li>item 11</li> </ol> <ol class="instructions"> <li>item 12</li> <li>item 13</li> </ol> </div> </body>
解決方案2
1 2020-08-13 11:52:47
我發現這種可能的解決方案保留了一般結構和全局變量和選擇器。
感謝所有的評論和建議。 我希望所有的答案和評論能幫助那些有類似問題的人。
ol { list-style-type: none; } ol.instructions:not(.continue){ counter-reset: item; } ol.instructions.continue{ counter-reset: itemC var(--lastC); } ol.instructions.continue li::before { content: counter(itemC) "."; counter-increment: itemC; } li::before { content: counter(item) "."; counter-increment: item; }
<div class="col"> <ol class="instructions"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol class="instructions continue" style="--lastC:3"> <li>item 4</li> <li>item 5</li> </ol> </div> <div class="col"> <ol class="instructions continue" style="--lastC:5"> <li>item 6</li> <li>item 7</li> </ol> <ol class="instructions"> <li>item 8</li> <li>item 9</li> </ol> </div> <div class="col"> <ol class="instructions continue" style="--lastC:2"> <li>item 10</li> <li>item 11</li> </ol> <ol class="instructions"> <li>item 12</li> <li>item 13</li> </ol> </div>
解決方案3
0 2020-08-12 09:01:51
您不應該重置ol內的計數器
body{ counter-reset: item; } ol { list-style-type: none; } ol.instructions:not(.continue){ /* counter-reset: item;*/ } li::before { counter-increment: item; content: counter(item) "."; }
<div class="col"> <ol class="instructions"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol class="instructions continue"> <li>item 4</li> <li>item 5</li> </ol> </div> <div class="col"> <ol class="instructions continue"> <li>item 6</li> <li>item 7</li> </ol> <ol class="instructions"> <li>item 8</li> <li>item 9</li> </ol> </div> <div class="col"> <ol class="instructions continue"> <li>item 10</li> <li>item 11</li> </ol> <ol class="instructions"> <li>item 12</li> <li>item 13</li> </ol> </div>
您需要將continue邏輯移動到 col div
body{ counter-reset: item; } ol { list-style-type: none; }.col:not(.continue){ counter-reset: item; } li::before { counter-increment: item; content: counter(item) "."; }
<div class="col"> <ol class="instructions"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol class="instructions "> <li>item 4</li> <li>item 5</li> </ol> </div> <div class="col continue"> <ol class="instructions "> <li>item 6</li> <li>item 7</li> </ol> <ol class="instructions"> <li>item 8</li> <li>item 9</li> </ol> </div> <div class="col continue"> <ol class="instructions "> <li>item 10</li> <li>item 11</li> </ol> <ol class="instructions"> <li>item 12</li> <li>item 13</li> </ol> </div> <div class="col"> <ol class="instructions "> <li>item 10</li> <li>item 11</li> </ol> <ol class="instructions"> <li>item 12</li> <li>item 13</li> </ol> </div>
解決方案4
0 2020-08-12 09:16:12
我想不出用一個計數器完全做到這一點的方法。
這是使用分組計數器的一種方法：
body { counter-reset: group-one group-two group-three; } ol { list-style-type: none; }.group-one li::before { counter-increment: group-one; content: counter(group-one) "."; }.group-two li::before { counter-increment: group-two; content: counter(group-two) "."; }.group-three li::before { counter-increment: group-three; content: counter(group-three) "."; }
<div class="col"> <ol class="instructions group-one"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> <ol class="instructions group-one"> <li>item 4</li> <li>item 5</li> </ol> </div> <div class="col"> <ol class="instructions group-one"> <li>item 6</li> <li>item 7</li> </ol> <ol class="instructions group-two"> <li>item 8</li> <li>item 9</li> </ol> </div> <div class="col"> <ol class="instructions group-two"> <li>item 10</li> <li>item 11</li> </ol> <ol class="instructions group-three"> <li>item 12</li> <li>item 13</li> </ol> </div>
CSS中的反增量問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.