Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So verwenden Sie das CSS-Counter-Inkrement-Attribut

(*-*)浩
Freigeben: 2019-05-29 10:05:09
Original
1967 Leute haben es durchsucht

Das Zählerinkrement-Attribut legt die Zählerinkrementierung für jedes Vorkommen eines Selektors fest. Die Standardinkrementierung beträgt 1.

So verwenden Sie das CSS-Counter-Inkrement-Attribut

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.

描述
none
默认。选择器无计数器增量。
id number

id 定义将增加计数的选择器、id 或 class。

number 定义增量。number 可以是正数、零或者负数。

inherit
规定应该从父元素继承 counter-increment 属性的值。
Wert

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.
InstanzenAnzahl Abschnitte und Unterabschnitte (z. B. „Abschnitt 1“, „1.1“ , „1.2“) Methode:
<!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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage