Un examen plus approfondi de la fonction count en CSS

Cet article vous présentera les fonctions de comptage en CSS : counter(), counters(). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

[Tutoriel recommandé : Tutoriel vidéo CSS]

counter()

counter renvoie un contre-courant représentatif Une chaîne de valeurs. Reçoit deux paramètres, un nom et un style de comptage. counter(name,styleName),name est sensible à la casse et sert d'identifiant de nom représentant le compteur actuel. Le paramètre styleName est facultatif et représente le type de chiffres ou de lettres incrémentiels. Les paramètres acceptables sont les types pris en charge par list-style-type. Ceux couramment utilisés sont les suivants :

• disque (points pleins)
• cercle (points creux)
• carré (carrés pleins)
• décimal (Chiffres arabes 12345...)
• inférieur-romain (chiffres romains i, ii, iii...)
• haut-romain (chiffres romains I, II, III, IV. . .)
• simp-chinois-informel (chinois comptant un, deux, trois, ... quatre-vingt-dix-neuf,)
• simp-chinois-formel (chinois traditionnel un un deux trois四五...)
• minuscule-latin (minuscule abcd...)
• majuscule-latin (majuscule ABCD....)
• ...

Pour plus d'informations et de compatibilité, voir MDN list-style-type

Il existe deux autres valeurs d'attribut liées aux contre-intérêts :

• compteur-réinitialisation
• compteur-incrémentation

compteur-réinitialisation, compteur-incrémentation

counter-reset est utilisé pour réinitialiser le compteur CSS. Le contenu de la réinitialisation comprend le nom et le numéro initial. Exemple :

    <div></div>

      .demo1 {
        counter-reset: counter1 123;
      }
      .demo1:before {
        content: counter(counter1,simp-chinese-formal);
      }

Effet

contre-incrément est utilisé pour représenter l'intervalle d'incrément du compteur, voir le code

    <p>
      <section></section>
      <section></section>
      <section></section>
      <section></section>
    </p>
      .demo2{
        counter-reset: counter2 1;
        /* counter-increment: counter2 -2; */
      }
      section:before {
        content: counter(counter2,decimal);
        counter-increment: counter2 2;
      }

Effet

Compatibilité

Supporte essentiellement les

compteurs()

counters () est un compteur imbriqué, utilisé pour définir le caractère de connexion du compteur imbriqué counters(counterName, string, styleName) , reçoit 3 paramètres counterName, string, styleName Le troisième paramètre est facultatif Chosen. . Regardez l'effet marron

    <p>
      </p><p>
        内容一
        </p><p>
          </p><p>子内容一</p>
          <p>子内容二</p>
          <p>子内容三</p>
        
      
      <p>
        内容二
        </p><p>
          </p><p>
            子内容一
            </p><p>
              </p><p>子子内容一</p>
              <p>子子内容二</p>
            
          
          <p></p>
          <p></p>
          <p></p>
        
      
      <p>
        内容三
      </p>
    

      .father {
        counter-reset: counter3;
        padding-left: 30px;
      }
      .son:before {
        content: counters(counter3, "-")'.';
        counter-increment: counter3;
      }

Les éléments de liste utilisent des compteurs pour définir des règles de connexion de comptage entre eux, qui peuvent facilement simuler une liste ordonnée.

Compatibilité

La compatibilité est la même que celle du compteur

Résumé

le compteur est analogue à ol, ul, in style Il sera plus flexible en termes de contrôle et le style de réglage sera plus arbitraire. Pour les projets avec optimisation de style liée aux listes, vous pouvez envisager d'utiliser counter() et counters() pour l'optimisation. La compatibilité est également bonne.

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéo de programmation ! !

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!