Question

有人可以解释为什么在section标记中的h2计数器值中打印0吗？

这是源代码：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    counter-reset: section;
    counter-reset: subsection;
}

h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>

<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

</body>
</html>

Answer 1

您的解决方案在counter-reset标签中有两个body属性：

body {
    counter-reset: section;     
    counter-reset: subsection;
}

顾名思义，CSS是级联，因此，counter-reset属性的第二次出现将覆盖第一个。结果，counter-reset: section;将被counter-reset: subsection;覆盖，并且section重置将完全无法定义。

解决方案

将subsection计数器移到h1标记中。然后，subsection计数器将为每个h1标签复位：
```
body {
    counter-reset: section; 
}

h1 {
    counter-reset: section; 
}
```

<!DOCTYPE html>
<html>
<head>
<style>
body {
    counter-reset: section;
}

h1 { 
    counter-reset: subsection; 
}

h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>

<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

</body>
</html>

将与subsection计数器内联的section计数器定义为@Temani suggested。这样subsection计数器将不会重置：
```
body {
    counter-reset: section subsection; 
}
```

<!DOCTYPE html>
<html>
<head>
<style>
body {
    counter-reset: section subsection;
}

h1::before {
    counter-increment: section;
    content: "Section " counter(section) ". ";
}

h2::before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>

<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

</body>
</html>

Answer 2

这里隐藏的技巧是您要覆盖属性。您在同一块中使用了两次counter-reset，因此仅考虑最后一个，这就是subsection可以正常运行而不是section的原因。

例如，如果您将counter-reset中的一个移至html，其行为将与预期的一样：

body {
  counter-reset: section;
}

html {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

或者您可以使用相同的属性重置两个计数器：

body {
  counter-reset: section subsection;
}


h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

<h1>HTML tutorials:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>

<h1>Scripting tutorials:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>

<h1>XML tutorials:</h1>
<h2>XML</h2>
<h2>XSL</h2>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

CSS计数器输出不匹配

2 个答案: