Question

为什么以下css没有正确编号的部分（http://jsfiddle.net/75MHS/）？当我将h3和h4放在div内时，所有章节编号和章节编号始终为1。但是当我删除div个容器时，数字都是正确的。

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
h3 {
  counter-increment: chapter;
  counter-reset: section;
}
h3:before {
  content: "Chapter " counter(chapter) " ";
}
h4 {
  counter-increment: section;
}
h4:before {
  content: counter(section) " ";
}
</style>
</head>
<body>
<!-- wrong counter -->
<div><h3>dddd</h3></div>
<div><h4>dddd</h4></div>
<div><h4>dddd</h4></div>
<div><h3>dddd</h3></div>
<div><h4>dddd</h4></div>
<div><h4>dddd</h4></div>

<!-- correct counter -->
<!--
<h3>dddd</h3>
<h4>dddd</h4>
<h4>dddd</h4>
<h3>dddd</h3>
<h4>dddd</h4>
<h4>dddd</h4>
-->
</body>
</html>

Answer 1

它在第二部分中的预期工作（没有div）但在第一部分中没有的原因是由于反作用范围。根据{{3}}：

计数器的范围从文档中第一个元素开始，该元素具有该计数器的“反复位”，并包含元素的后代及其后代兄弟及其后代。

在html的后半部分，h3和h4是兄弟姐妹，因此，counter-reset上定义的h3适用于以下{{ 1}}兄弟姐妹。在html的第一部分中，h4 s不是h4 s的后代或兄弟，因此，反对它们对它们没有影响，因为它们超出了范围。

另一件事是，如果在给定范围内未定义h3，则每次counter-reset或{{1}中的计数器时，它都会假设0的值规则，这解释了为什么你在html的第一部分得到所有counter-increment：

如果元素或伪元素上的'counter-increment'或'content'指的是不在任何'counter-reset'范围内的计数器，那么实现应该表现得像'counter-reset'那样在该元素或伪元素上将计数器重置为0.

如果你必须在div中包装东西，我会：

为content上的1计数器定义counter-reset，以便每次使用chapters时都不会为0。
< / LI>
将body嵌套在其父counter-increment下（这不是很酷）或者让他们成为兄弟姐妹，以确保它们在正确的范围内。

新HTML：

h4

加入CSS：

h3

W3C

Answer 2

你现在忘记了div是DOM树的一部分，你也可以将它们作为目标，也可以将它们删除。

div {
    counter-increment: chapter;
    counter-reset: section;
}
div:before {
    content: "Chapter " counter(chapter) " ";
}

Answer 3

我在包装中添加了类以区分div。

<强> Working Demo

HTML

<div class="head"><h3>dddd</h3></div>
<div class="sub"><h4>dddd</h4></div>
<div class="sub"><h4>dddd</h4></div>
<div class="head"><h3>dddd</h3></div>
<div class="sub"><h4>dddd</h4></div>
<div class="sub"><h4>dddd</h4></div>

CSS

div.head {
  counter-increment: chapter;
  counter-reset: section;
}

div.head h3:before {
  content: "Chapter " counter(chapter) " ";
}

div.sub {
  counter-increment: section;
}

div.sub h4:before {
  content: counter(section) " ";
}

Answer 4

原因是“计数器是'自我嵌套'，因为重置后代元素或伪元素中的计数器会自动创建计数器的新实例。”（CSS 2.1,12.4.1 {{ 3}}）。

因此，在“错误计数器”的情况下，包含div元素的每个h3元素都有自己的名为chapter的计数器，并且每个h3递增这样的本地计数器

如果您需要div元素（或section元素）进行分组，您可以这样使用它们：

<div class=chapter>
<h3>dddd</h3>
<h4>dddd</h4>
<h4>dddd</h4>
</div>
<div class=chapter>
<h3>dddd</h3>
<h4>dddd</h4>
<h4>dddd</h4>
</div>

使用这样的结构，您的CSS将.chapter而不是h3：

.chapter {
  counter-increment: chapter;
  counter-reset: section;
}

使用css计数器编号错误

4 个答案: