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.