嵌套的 CSS 计数器不显示增量 [重复]

Question

我正在尝试使用 CSS 计数器来应用于一系列元素，但我很遗憾未能做到这一点。

HTML代码很简单：

body {
  counter-reset: objgen;
}

span.general:before {
  content: counter(objgen);
  counter-increment: objgen;
}

span.general {
  counter-reset: objesp;
  font-weight: bold;
}

span.esp:before {
  content: counter(objgen) "." counter(objesp);
  counter-increment: objesp;
}

span.esp {
  font-weight: bold;
}

<p>inputs: </p>
<p><span class="general"></span> <input type="text" value="test1"></p>
<p><span class="esp"></span> <input type="text" value="test2"></p>
<p><span class="esp"></span> <input type="text" value="test3"></p>
<p><span class="general"></span> <input type="text" value="test4"></p>
<p><span class="esp"></span> <input type="text" value="test5"></p>
<p><span class="esp"></span> <input type="text" value="test6"></p>

objgen 计数器运行正常，但 objesp 从不增加其值：它始终等于 1。我做错了什么？

问题是因为“esp”类的跨度没有嵌套在“通用”类的跨度中吗？

评论

似乎 Paulie_D 指出问题出在结构上，以下 HTML 可以正常工作（这不是唯一的可能性）：

<span class="general"></span><input type="text" value="test1">
<span class="esp"></span><input type="text" value="test2">
<span class="esp"></span><input type="text" value="test3">
<span class="general"></span><input type="text" value="test1">
<span class="esp"></span><input type="text" value="test2">
<span class="esp"></span><input type="text" value="test3">

Answer 1

你使用错误的类。如果您已经为元素分配了类，则不需要分配元素 span。

所以不是

    span.general -> .general

这可能会解决您的问题。

            body {
            counter-reset: objgen; 
        }
        .general::before {
            content: counter(objgen) ;
            counter-increment: objgen;
        }
        .general {
            counter-reset: objesp;
            font-weight: bold;
        }
        .esp::before {
            content: counter(objgen) "." counter(objesp);
            counter-increment: objesp;
        }
        .esp {
            font-weight: bold;
        }

这个怎么样？