多个CSS计数器无法正常工作 [英] Multiple CSS counters not working as expected
问题描述
我正在尝试在html表中创建多个级别的计数器，但是这没有按我预期的那样工作. 第一个计数器可以正常工作，但是第二个计数器不能工作.计数器不知何故没有递增或被错误地重置?
I am trying to create multiple levels of counters in a html table, but this is not working as I expected. The first counter works ok, but the next counters do not work. Somehow the counters are not incrementing or are reset wrongly?
代码:
<html>
<head>
<title>Counter Demo</title>
<style>
table.tasksteps {
counter-reset: tasksteps;
}
td.taskstep {
counter-reset: risks;
counter-increment: tasksteps;
}
td.risk {
counter-reset: measures;
counter-increment: risks;
}
td.measure {
counter-increment: measures;
}
td.taskstep:before {
content: counter(tasksteps) '. ';
}
td.risk:before {
content: counter(tasksteps) '.' counter(risks) '. ';
}
td.measure:before {
content: counter(tasksteps) '.' counter(risks) '.' counter(measures) '. ';
}
</style>
</head>
<body>
<table class="tasksteps">
<thead>
<tr>
<td>TaakStep</td>
<td>Risk</td>
<td>Measure</td>
</tr>
</thead>
<tbody>
<tr>
<td class="taskstep t1">Step 1</td>
<td></td>
<td></td>
</tr>
<tr>
<td class="taskstep t2">Step 2</td>
<td class="risk">Risk 1</td>
<td></td>
</tr>
<tr>
<td class="t3"></td>
<td class="risk">Risk 2</td>
<td></td>
</tr>
<tr>
<td class="taskstep t2">Step 3</td>
<td class="risk">Risk 3</td>
<td></td>
</tr>
<tr>
<td class="taskstep t2">Step 4</td>
<td class="risk">Risk 4</td>
<td></td>
</tr>
<tr>
<td class="t4"></td>
<td class="risk">Risk 5</td>
<td class="measure">Measure 1</td>
</tr>
<tr>
<td class="t5"></td>
<td></td>
<td class="measure">Measure 2</td>
</tr>
<tr>
<td class="t5"></td>
<td></td>
<td class="measure">Measure 3</td>
</tr>
<tr>
<td class="t5"></td>
<td></td>
<td class="measure">Measure 4</td>
</tr>
<tr>
<td class="t3"></td>
<td class="risk">Risk 6</td>
<td></td>
</tr>
<tr>
<td class="t4"></td>
<td class="risk">Risk 7</td>
<td class="measure">Measure 5</td>
</tr>
</tbody>
</table>
</body>
</html>
这给出了输出:
This gives output:
推荐答案
这里有2个问题:
-
第一个被计数元素的直接父级应该包含所有其他被计数元素.在您的情况下，第一个计数元素是连续的
td，因此其父元素是tr，但其他所有计数元素都有自己的tr父元素(它们是同级元素)第一个被计数元素的父元素的值).因此，要解决此问题，我认为您必须在tr上设置类并在那里进行计数.
The direct parent of the first counted element should contain all the other counted elements. In your case, the first counted element is a
tdin a row, so its parent is atrbut all the other counted elements have their own parents oftr(which are siblings of the parent of the first counted element). So to fix this I think you have to set the class on thetrand count it there.
counter-reset和counter-increment可以被覆盖，这意味着如果在一个tr上，您需要对多个计数器变量使用counter-reset和counter-increment，则需要将它们放入在counter-reset和counter-increment的同一声明(以空格分隔)上.
The counter-reset and counter-increment can be overridden, that means if at one tr, you need to use counter-reset and counter-increment for more than 1 counter variable, you need to put them on the same declaration (space-separated) for counter-reset and counter-increment.
从以上两点开始，这是应该的代码:
From 2 points above, here is the code it should be:
HTML :
<table class="tasksteps">
<thead>
<tr>
<td>TaakStep</td>
<td>Risk</td>
<td>Measure</td>
</tr>
</thead>
<tbody>
<tr class="taskstep">
<td class="taskstep t1">Step 1</td>
<td></td>
<td></td>
</tr>
<tr class="taskstep risk">
<td class="taskstep t2">Step 2</td>
<td class="risk">Risk 1</td>
<td></td>
</tr>
<tr class="risk">
<td class="t3"></td>
<td class="risk">Risk 2</td>
<td></td>
</tr>
<tr class="taskstep risk">
<td class="taskstep t2">Step 3</td>
<td class="risk">Risk 3</td>
<td></td>
</tr>
<tr class="taskstep risk">
<td class="taskstep t2">Step 4</td>
<td class="risk">Risk 4</td>
<td></td>
</tr>
<tr class="risk">
<td class="t4"></td>
<td class="risk">Risk 5</td>
<td class="measure">Measure 1</td>
</tr>
<tr>
<td class="t5"></td>
<td></td>
<td class="measure">Measure 2</td>
</tr>
<tr>
<td class="t5"></td>
<td></td>
<td class="measure">Measure 3</td>
</tr>
<tr>
<td class="t5"></td>
<td></td>
<td class="measure">Measure 4</td>
</tr>
<tr class="risk">
<td class="t3"></td>
<td class="risk">Risk 6</td>
<td></td>
</tr>
<tr class="risk">
<td class="t4"></td>
<td class="risk">Risk 7</td>
<td class="measure">Measure 5</td>
</tr>
</tbody>
</table>
CSS :
table.tasksteps {
counter-reset: tasksteps;
}
tr.taskstep {
counter-reset: risks;
counter-increment: tasksteps;
}
tr.risk {
counter-reset: measures;
counter-increment: risks;
}
tr.taskstep.risk {
counter-reset: risks measures;
counter-increment: tasksteps risks;
}
td.measure {
counter-increment: measures;
}
td.taskstep:before {
content: counter(tasksteps) '. ';
}
td.risk:before {
content: counter(tasksteps) '.' counter(risks) '. ';
}
td.measure:before {
content: counter(tasksteps) '.' counter(risks) '.' counter(measures) '. ';
}
这篇关于多个CSS计数器无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
