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”类的跨度没有嵌套在“general”类的范围内？

COMMENT

似乎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 。

所以而不是

$timeout(function() {
 console.log($scope.qty) 
}, 400);

这可能会解决您的问题。

    span.general -> .general

怎么样？

嵌套的CSS计数器不显示增量

1 个答案: