CSS 不同范围的反增量
[英]CSS counter-increment with different scopes
问题描述
I need to create a continuous enumeration in different order list of the document.
我需要在文档的不同顺序列表中创建一个连续枚举。
The HTML is generated dynamically and cannot be modified. HTML 是动态生成的，不能修改。
I have the following structure and CSS:我有以下结构和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>
The selector .instructions starts a new count, but .instructions.continue must continue with previous counting.选择器.instructions开始一个新的计数，但.instructions.continue必须继续之前的计数。
The result should be:结果应该是：
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
Please use all ol in col div.请使用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
I find this possible solution preserving a general structure and global variables and selectors.我发现这种可能的解决方案保留了一般结构和全局变量和选择器。
Thanks for all the comments and recommendations.感谢所有的评论和建议。 I hope all the answers and comments help those with similar problems.我希望所有的答案和评论能帮助那些有类似问题的人。
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
You should not reset the counter inside the ol您不应该重置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>
You need to move your continue logic to col 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
I can't figure out a way to do it exactly with a single counter.我想不出用一个计数器完全做到这一点的方法。
Here's a way using grouped counters:这是使用分组计数器的一种方法：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
CSS中的反增量问题 - Issue with counter-increment in css
CSS反递增不递增 - CSS counter-increment not incrementing
CSS“反增量”不递增 - CSS “counter-increment” not incrementing
CSS反增量和反重置 - CSS Counter-increment and counter-reset
css对段号的反增量 - css counter-increment for section numbers
html css 格式的反增量 - counter-increment with formatting in html css
CSS计数器增量不适用于嵌套的div和h3元素 - CSS counter-increment is not working for nested div and h3 elements
为什么两个反向增量在CSS选择器中不起作用 - Why two counter-increment does not work in a css selector
打印视图问题上的CSS计数器增量页面 - CSS counter-increment page on print view issue
如何在文字段落的下方放置css反增量？ - How to place a css counter-increment below a paragraph of text?
相关标签