CSS反增量和反重置
[英]CSS Counter-increment and counter-reset
問題描述
請問有人可以向我解釋為什么即使沒有將復位應用於小節計數器，我也得到'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>
輸出：
2 個解決方案
解決方案1
0 2016-04-10 18:04:26
請嘗試以下方法：
代替
h1 {
counter-reset: section;
}
這將是
h1 {
counter-reset: subsection;
}
解決方案2
0 2016-04-10 18:14:34
看到這篇關於counter-reset屬性的很好的文章。
https://css-tricks.com/almanac/properties/c/counter-reset/
就像說的那樣，當代碼中出現新的h1時， h1元素用於重置h2 counter-increment 。
范例：
<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
因此，您必須使用此代碼來使重置在h2:before正常工作：
h1 {
counter-reset: subsection // which is the name of h2 counter-increment;
}
iText 和計數器遞增/計數器重置
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.