Html css计数器编号错误_Html_Css

Html css计数器编号错误

html css

Html css计数器编号错误,html,css,Html,Css,为什么下面的css没有获得正确的节编号（）？当我把h3和h4放在divs中时，所有章节号和章节号总是一个。但是当我删除div容器时，数字都是正确的 <!DOCTYPE html> <html> <head> <style type='text/css'> h3 { counter-increment: chapter; counter-reset: section; } h3:before { content: "Chapter " c

为什么下面的css没有获得正确的节编号（）？当我把

h3

和

h4

放在

div

s中时，所有章节号和章节号总是一个。但是当我删除

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>


h3{
反增量：第章；
计数器复位：部分；
}
h3：之前{
内容：“计数器（章）”章节；
}
h4{
反增量：节；
}
h4:之前{
内容：柜台（部分）“；
}
dddd
dddd
dddd
dddd
dddd
dddd

您忘记了div现在是DOM树的一部分，您要么将其作为目标，要么将其删除

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

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

HTML

原因是“计数器是‘自嵌套的’，即在子元素或伪元素中重置计数器会自动创建计数器的新实例。”（CSS 2.1，12.4.1）

因此，在“错误计数器”的情况下，包含

h3

元素的每个

div

元素都有自己的名为

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>

它在第二节（不包括div）中按预期工作，但在第一节中不起作用的原因是由于反作用域。根据报告：

计数器的作用域从文档中第一个元素开始，该元素对该计数器具有“计数器重置”，并包括该元素的子元素及其后续子元素

在html的后半部分中，

h3

s和

h4

s是同级，因此，在

h3

上定义的

计数器重置

适用于以下同级

h4

。在html的第一部分中，

h4

s不是

h3

s的后代或兄弟，因此，计数器剩余部分对它们没有影响，因为它们超出了范围

另一件事是，如果未在给定范围内定义

计数器重置

，则每次

计数器递增

或在

内容

规则中引用计数器时，它都假定值为

，这解释了为什么在html的第一部分中获得所有

：

如果元素或伪元素上的“计数器增量”或“内容”指的是不在任何“计数器重置”范围内的计数器，则实现应表现为“计数器重置”已将该元素或伪元素上的计数器重置为0

如果你必须用div来包装东西，我会：

为

正文

上的

章节

计数器定义一个

计数器重置

，这样每次使用

计数器增量

时就不会假定为0

要么将

h4

s嵌套在其父

h3

s下（这并不酷），要么让它们成为兄弟，以确保它们在正确的范围内

新HTML:

<div>
    <h3>dddd</h3>
    <h4>dddd</h4>
    <h4>dddd</h4>
</div>
<div>
    <h3>dddd</h3>
    <h4>dddd</h4>
    <h4>dddd</h4>
</div>

body {
    counter-reset: chapter;
}

我想知道，当我只使用

计数器增量

而不使用

计数器重置

时，为什么它仍然有效？html是

abc

，样式是

h4{counter increment:section；}h4:before{content:counter（section）；}

@Z.H。请参阅我答案中的第二个引号。浏览器的行为就像一个

计数器重置：部分

是在第一个

h4

上定义的，因为您在

部分计数器上使用了计数器增量
，但范围内没有计数器重置。我误解了您的第二个引用。现在很清楚了。谢谢。这帮我解决了我的问题，因为我必须使用这种标记。谢谢！
.chapter {
  counter-increment: chapter;
  counter-reset: section;
}

<div>
    <h3>dddd</h3>
    <h4>dddd</h4>
    <h4>dddd</h4>
</div>
<div>
    <h3>dddd</h3>
    <h4>dddd</h4>
    <h4>dddd</h4>
</div>

body {
    counter-reset: chapter;
}