Html CSS计数器增量和计数器重置_Html_Css

Html CSS计数器增量和计数器重置

html css

Html CSS计数器增量和计数器重置,html,css,Html,Css,请有人向我解释一下，为什么即使重置没有应用到分段计数器，我也会得到“1”。我的意思是，对于同一个h1标记下的所有h2标记，我不应该得到1.1、1.2、1.3而不是1.1、1.1、1.1。我是学习CSS的初学者，如果有人能够解释的话，这将对我有很大帮助。提前谢谢。代码是： <!DOCTYPE html> <html> <head> <style> body { counter-reset: section; } h1 { count

请有人向我解释一下，为什么即使重置没有应用到分段计数器，我也会得到“1”。我的意思是，对于同一个h1标记下的所有h2标记，我不应该得到1.1、1.2、1.3而不是1.1、1.1、1.1。我是学习CSS的初学者，如果有人能够解释的话，这将对我有很大帮助。提前谢谢。代码是：

<!DOCTYPE html>
<html>
<head>
<style>
body {
    counter-reset: section;
}

h1 {
    counter-reset: section;
}

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

h2:before {
    counter-increment: subsection;
    content: counter(section) "." counter(subsection) " ";
}
</style>
</head>

<body>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

<h1>HTML tutorials</h1>
<h2>HTML Tutorial</h2>
<h2>XHTML 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>

</body>
</html>


身体{
计数器复位：部分；
}
h1{
计数器复位：部分；
}
h1：之前{
反增量：节；
内容：“部分“柜台（部分）”；
}
h2：之前{
反增量：分段；
内容：柜台（部分）““柜台（子部分）”；
}
注意：IE8仅在以下情况下支持这些属性！已指定DOCTYPE
HTML教程
HTML教程
XHTML教程
CSS教程
脚本教程
JavaScript
VBScript
XML教程
XML
XSL

输出：

请尝试以下操作：

<h1>HTML tutorials</h1> // count 1 
<h2>HTML Tutorial</h2> // count 1.1 because you have one h1 above
<h2>XHTML Tutorial</h2> // count 1.2
<h2>CSS Tutorial</h2> // count 1.3

<h1>Scripting tutorials</h1> // count 2 because of the new h1 tag
<h2>JavaScript</h2> // count 2.1 because of the reset after the new h1 appears
<h2>VBScript</h2> // count 2.2

而不是

h1 {
    counter-reset: section;
}

会的

h1 {
    counter-reset: subsection;
}

请参阅这篇关于

计数器重置

属性的非常好的文章

如上所述，

h1

元素用于在代码中出现新的

h1

时重置

h2

计数器增量
示例：
<h1>HTML tutorials</h1> // count 1 
<h2>HTML Tutorial</h2> // count 1.1 because you have one h1 above
<h2>XHTML Tutorial</h2> // count 1.2
<h2>CSS Tutorial</h2> // count 1.3

<h1>Scripting tutorials</h1> // count 2 because of the new h1 tag
<h2>JavaScript</h2> // count 2.1 because of the reset after the new h1 appears
<h2>VBScript</h2> // count 2.2

谢谢，但我实际上想知道当我写h1{counter reset:section}时发生了什么。它不会增加h1:before值，因为每次它都试图增加它，重置它。好的。但是h2:before值发生了什么？为什么该值没有增加？分段计数器没有在任何地方重置。是的，它是用h1选择器重置的。你读了我所有的答案和我提供的文章了吗？这里有解释。是的，我读过，但不知怎的，我无法理解。h1选择器正在重置计数器（第节）。计数器（小节）未重置是我所能理解的。如果您同意，请您指出我在这里缺少的点。谢谢，但我实际上想知道当我写h1{counter reset:section}时发生了什么