0

サブアイテムを示すアイテムをインクリメントする CSS カウンターを取得しようとしています。おそらく、HTML がネストされていないため、リセットが期待どおりに機能していないように見えます。誰かが理由を理解するのを手伝ってくれますか? ボディ セレクターのカウンターをリセットするsub-itemと、すべてのサブアイテムがアイテムと同じように扱われ、2 回目のリセットは無視されます。

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 に答える