为嵌套列表插入CSS父节计数器 [英] Insert CSS parent section counter for nested lists
问题描述
我有2级 ul .我正在使用 counter-reset ， counter-crement 和 content 来插入运行中的计数器.它的工作方式是 li 中的内容正确编号.
I have a 2 level ul. I am using counter-reset, counter-increment, and content to insert a running counter. It works in that the content in the lis is numbering correctly.
我在第一层 li 中有一个 a 链接，在它嵌套的 ul 之后，我想说添加到规则[数字的李]].
I have and a link in the first level li, after its nested ul that I want to say "Add To Rule [number of parent li]".
下面是我正在做的最低限度的工作示例.在 a 链接中，它使用第二级 ul / li 的计数器.
Below is a minimum working example of what I am doing. In the a link, it is using the counter for the 2nd level ul/li.
输出内容:
-
规则1
Rule 1
- 规则1.1
... - 规则1.2
... - 规则1.3
...
添加到规则1.3
规则2
- 规则2.1
... - 规则2.2
... - 规则2.3
...
添加到规则2.3
规则3
- 规则3.1
... - 规则3.2
... - 规则3.3
...
添加到规则3.3
我正在尝试实现的目标:
What I am trying achieve:
-
规则1
Rule 1
- 规则1.1
... - 规则1.2
... - 规则1.3
...
添加到规则1
规则2
- 规则2.1
... - 规则2.2
... - 规则2.3
...
添加到规则2
规则3
- 规则3.1
... - 规则3.2
... - 规则3.3
...
添加到规则3
我无法弄清楚要获得期望/期望的输出该怎么做.
I can't figure out what I need to do to get my expected/wanted output.
ul
{
counter-reset: section;
}
li
{
counter-increment: section;
}
.ruleNumber::after
{
content: counters(section, ".");
}
a::after
{
content: counters(section, ".");
}<ul>
<li>
<span class="ruleNumber">Rule </span>
<ul>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
</ul>
<a href="#" onclick="">Add To Rule </a>
</li>
<li>
<span class="ruleNumber">Rule </span>
<ul>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
</ul>
<a href="#" onclick="">Add To Rule </a>
</li>
<li>
<span class="ruleNumber">Rule </span>
<ul>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
</ul>
<a href="#" onclick="">Add To Rule </a>
</li>
</ul>推荐答案
您可以使用两个单独的计数器-一个用于节，另一个用于项:
You might use two separate counters -- one for sections and one for items:
ul {
counter-reset: section;
}
ul ul {
counter-reset: item;
counter-increment: section;
}
li {
counter-increment: item;
}
.ruleNumber::after {
content: counters(item, ".");
}
a::after {
content: counters(section, ".");
}<ul>
<li>
<span class="ruleNumber">Rule </span>
<ul>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
</ul>
<a href="#" onclick="">Add To Rule </a>
</li>
<li>
<span class="ruleNumber">Rule </span>
<ul>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
</ul>
<a href="#" onclick="">Add To Rule </a>
</li>
<li>
<span class="ruleNumber">Rule </span>
<ul>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
<li>
<span class="ruleNumber">Rule </span>
<div class="rule">...</div>
</li>
</ul>
<a href="#" onclick="">Add To Rule </a>
</li>
</ul>这篇关于为嵌套列表插入CSS父节计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
