0

我试图让 CSS 计数器增加指示子项目的项目。也许是因为 HTML 没有嵌套，重置看起来不像我预期的那样工作。谁能帮我理解为什么？如果我sub-item在正文选择器中重置计数器，所有子项目都会像项目一样被处理，而忽略第二次重置。

CSS定义：

body {
  counter-reset: panel item;
  font-family: monospace;
}

div.panel-heading:before {
  counter-increment: panel;
  content: "Panel " counter(panel, upper-roman) ". ";
}

div.panel-body div.item:before {
  counter-increment: item;
  content: "Item " counter(item) ". ";
  counter-reset: sub-item;
}

div.panel-body div.sub-item:before {
  counter-increment: sub-item;
  content: "sub-item " counter(item) counter(sub-item, lower-alpha) ". ";
}

HTML正文：

<div class="panel">
  <div class="panel-heading">
    &lt;- should be I </div>
  <div class="panel-body">
    <div class="item">
      &lt;- should be 1
    </div>
    <div class="sub-item">
      &lt;- should be 1a
    </div>
    <div class="sub-item">
      &lt;- should be 1b
    </div>
    <div class="sub-item">
      &lt;- should be 1c
    </div>
    <div class="item">
      &lt;- should be 2
    </div>
    <div class="sub-item">
      &lt;- should be 2a
    </div>
    <div class="sub-item">
      &lt;- should be 2b
    </div>
  </div>
</div>
<div class="panel">
  <div class="panel-heading">
    &lt;- should be II </div>
  <div class="panel-body">
    <div class="item">
      &lt;- should be 3
    </div>
    <div class="sub-item">
      &lt;- should be 3a
    </div>
    <div class="item">
      &lt;- should be 4
    </div>
    <div class="sub-item">
      &lt;- should be 4a
    </div>
    <div class="sub-item">
      &lt;- should be 4b
    </div>
    <div class="sub-item">
      &lt;- should be 4c
    </div>
  </div>
</div>

为方便起见，这是一个jsfiddle。

4

1 回答 1

0

好的，我想通了。我在网上发现一些帖子建议在伪选择器中重置不起作用。我将它们移出，现在可以按预期工作。但是，这似乎不会影响增量。

div.panel-body > div.item {
  counter-increment: item;
  counter-reset: sub-item;
}

div.panel-body > div.item:before {
  content: "Item " counter(item) ". ";
}

这是工作解决方案小提琴

于 2016-05-02T18:30:51.033 回答