Heim > Artikel > Web-Frontend > So verwenden Sie das CSS-Counter-Inkrement-Attribut
So verwenden Sie das CSS-Counter-Inkrement-Attribut
- (*-*)浩Original
- 2019-05-29 10:05:091909Durchsuche
Das Zählerinkrement-Attribut legt die Zählerinkrementierung für jedes Vorkommen eines Selektors fest. Die Standardinkrementierung beträgt 1.
Beschreibung
Mit dieser Eigenschaft kann der Zähler um einen bestimmten Wert erhöht (oder verringert) werden, der positiv sein kann oder negativer Wert. Wenn kein Zahlenwert angegeben wird, wird standardmäßig 1 verwendet.
Hinweis: Wenn „display: none“ verwendet wird, kann die Anzahl nicht erhöht werden. Wenn „Sichtbarkeit: versteckt“ verwendet wird, kann die Anzahl erhöht werden.
|
Beschreibung | ||||||||
| keine |
Standard. Der Selektor verfügt über kein Zählerinkrement. |
||||||||
| ID-Nummer |
id definiert den Selektor, die ID oder die Klasse, die die Anzahl erhöht. Zahl definiert die Schrittweite. Die Zahl kann positiv, null oder negativ sein. | ||||||||
| erben |
Vorschriften Der Wert des Counter-Inkrement-Attributs sollte vom übergeordneten Element geerbt werden. |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
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>
<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 counter-increment 属性。</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>Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Counter-Inkrement-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!