CSSのカウンターインクリメントがネストされたdiv要素とh3要素に対して機能しない

debugcn 投稿 Dev

user2006754

CSSカウンターを機能させることができません。それらはどういうわけか機能しますが、ネストレベルのデクリメントではオフになります。

これが私のテストページです：

<!DOCTYPE HTML>
<html>
<head>
  <title>Chapter Numbering</title>

  <style type="text/css">
    div {
      counter-reset: myitemcounter;
    }
    h3::before {
      counter-increment: myitemcounter;
      content: counters(myitemcounter, ".") " ";
    }
  </style>
</head>

<body>

  <div>
    <h3>This should be ... 1 </h3>
    <h3>This should be ... 2 </h3>
    <div>
      <h3>This should be ... 2.1 </h3>
      <h3>This should be ... 2.2 </h3>
      <h3>This should be ... 2.3 </h3>
      <div>
        <h3>This should be ... 2.3.1 </h3>
        <h3>This should be ... 2.3.2 </h3>
      </div>
      <h3>This should be ... 2.4 </h3>
      <div>
        <h3>This should be ... 2.4.1 </h3>
      </div>
    </div>
    <h3>This should be ... 3 </h3>
    <div>
      <h3>This should be ... 3.1 </h3>
      <h3>This should be ... 3.2 </h3>
    </div>
  </div>

</body>
</html>

予想される数は、見出し項目のテキストにあります。実際の出力は（2.3.2以降は間違っています）：

1     This should be ... 1
2     This should be ... 2
2.1   This should be ... 2.1
2.2   This should be ... 2.2
2.3   This should be ... 2.3
2.3.1 This should be ... 2.3.1
2.3.2 This should be ... 2.3.2
2.3.3 This should be ... 2.4
2.3.1 This should be ... 2.4.1
2.4   This should be ... 3
2.1   This should be ... 3.1
2.2   This should be ... 3.2

ご協力いただきありがとうございます。

ジェームズマウンテン

スペックから：

カウンターのスコープは、そのカウンターの「カウンターリセット」を持つドキュメント内の最初の要素から始まり、要素の子孫とその子孫を持つ後続の兄弟が含まれます。

重要な点は、resetによって作成されるカウンターのスコープは、兄弟とそれに続く兄弟であるということです。その結果、をリセットするとdiv、これは次のh3要素にも適用されます。

代わりにdivの最初の子のカウンターをリセットすることで、これを期待どおりに機能させることができます。

div > :first-child {
    counter-reset: myitemcounter;
}

http://jsfiddle.net/9eabn3L3/6

div > :first-child {
    counter-reset: myitemcounter;
}
h3::before {
    counter-increment: myitemcounter;
    content: counters(myitemcounter, ".")" ";
}

<div>
    <h3>This should be ... 1 </h3>
    <h3>This should be ... 2 </h3>
    <div>
        <h3>This should be ... 2.1 </h3>
        <h3>This should be ... 2.2 </h3>
        <h3>This should be ... 2.3 </h3>
        <div>
            <h3>This should be ... 2.3.1 </h3>
            <h3>This should be ... 2.3.2 </h3>
        </div>
        <h3>This should be ... 2.4 </h3>
        <div>
            <h3>This should be ... 2.4.1 </h3>
        </div>
    </div>
    <h3>This should be ... 3 </h3>
    <div>
        <h3>This should be ... 3.1 </h3>
        <h3>This should be ... 3.2 </h3>
    </div>
</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]