Comment utiliser l'attribut de contre-incrémentation CSS-tutoriel CSS-php.cn

Comment utiliser l'attribut de contre-incrémentation CSS

(*-*)浩

Libérer： 2019-05-29 10:05:09

original

1981 Les gens l'ont consulté

L'attribut counter-increment définit l'incrément du compteur pour chaque occurrence d'un sélecteur. L'incrément par défaut est 1.

Comment utiliser l'attribut de contre-incrémentation CSS

Description

Grâce à cette propriété, le compteur peut être incrémenté (ou décrémenté) d'une certaine valeur, qui peut être positive ou une valeur négative. Si aucune valeur numérique n’est fournie, la valeur par défaut est 1.

Remarque : Si "affichage : aucun" est utilisé, le décompte ne peut pas être incrémenté. Si « visibilité : cachée » est utilisée, le nombre peut être augmenté.

值	描述
none	默认。选择器无计数器增量。
id number	id 定义将增加计数的选择器、id 或 class。 number 定义增量。number 可以是正数、零或者负数。
inherit	规定应该从父元素继承 counter-increment 属性的值。

Valeur

Description

aucun

Par défaut. Le sélecteur n'a pas d'incrément de compteur.

numéro d'identification

id définit le sélecteur, l'identifiant ou la classe qui incrémentera le décompte.

numéro définit l'incrément. le nombre peut être positif, nul ou négatif.

hériter

Règlement La valeur de l'attribut counter-increment doit être héritée de l'élément parent.

InstancesNuméroter les sections et sous-sections (par exemple "Section 1", " 1.1" , "1.2") méthode :

<!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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!