Certaines choses que vous ne savez peut-être pas sur les styles de comptoir personnalisés

Juan a récemment révélé des choses extrêmement intéressantes sur les listes de style (en particulier les marqueurs de liste) dans son entrée d'annuaire sur les règles. Vous avez peut-être déjà appris le pseudo-élément @counter-style. Vous avez probablement essayé d'utiliser des compteurs personnalisés ::marker et counter-reset. Alternativement, votre approche pourrait être de nettoyer counter-increment (faites attention à le faire!) Et faites défiler manuellement la marque sur la pseudo-élément list-style de l'élément de liste. ::before

Mais avez-vous essayé

? Il s'avère qu'il fait beaucoup de travail lourd et ouvre de nouvelles façons d'utiliser des listes et des balises de liste. @counter-style

Définissez le style de marquage pour un seul élément de liste

Ceci est appelé un système "fixe" défini sur un projet spécifique.

@counter-style style-fourth-item {
  system: fixed 4;
  symbols: "?";
  suffix: " ";
}

li {
  list-style: style-fourth-item;
}

attribuer des caractères à des balises spécifiques

Si vous utilisez le système "Accumulation", vous pouvez définir quels symboles appartiennent à quels éléments de liste.

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

li {
  list-style: dice;
}

Notez qu'une fois que le système atteint la fin de la boucle, il répète et démarre une nouvelle séquence basée sur le premier élément du motif. Par exemple, un dés typique a six côtés et nous commençons à rouler deux dés sur l'élément de la septième liste, un total de sept.

Ajouter un préfixe et un suffixe à la balise de liste

Il y a longtemps, Chris a montré un moyen d'insérer des marques de ponctuation à la fin d'une note de liste en utilisant un pseudo-élément d'un élément de liste:

::before

Il est plus facile à utiliser

ol {
  list-style: none;
  counter-reset: my-awesome-counter;

  li {
    counter-increment: my-awesome-counter;

    &::before {
      content: counter(my-awesome-counter) ") ";
    }
  }
}

maintenant:

@counter-styles

Définissez le style de plusieurs éléments de liste Range

@counter-style parentheses {
  system: extends decimal;
  prefix: "(";
  suffix: ") ";
}

Supposons que vous ayez une liste de 10 éléments, mais vous voulez simplement styler les éléments 1-3. Nous pouvons définir une gamme pour ceci:

Nous pouvons même élargir nos propres exemples de dés avant

@counter-style single-range {
  system: extends upper-roman;
  suffix: ".";
  range: 1 3;
}

li {
  list-style: single-range;
}

Une autre façon est d'utiliser le mot-clé

comme première valeur:

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends dice;
  suffix: ".";
  range: 1 3;
}

li {
  list-style: single-range;
}

infinite En parlant de

, vous pouvez le définir sur la deuxième valeur, qui comptera illimité en fonction du nombre d'éléments de liste dont vous disposez.

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style single-range {
  system: extends dice;
  suffix: ".";
  range: infinite 3;
}

li {
  list-style: single-range;
}

Peut-être que vous souhaitez styliser deux gammes à la fois et inclure les articles 6-9. Je ne sais pas pourquoi vous voulez faire cela, mais je crois que vous (ou votre hippo) avez de bonnes raisons. infinite

Ajouter un rembourrage aux marqueurs de liste

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

@counter-style multiple-ranges {
  system: extends dice;
  suffix: ".";
  range: 1 3, 6 9;
}

li {
  list-style: multiple-ranges;
}

Avez-vous déjà rencontré un alignement inégal des notes de liste? Cela se produit généralement d'un à deux chiffres. Vous pouvez remplir la marque de caractères supplémentaires pour aligner le contenu.

Maintenant, les marques s'aligneront toujours ... enfin, jusqu'à 999 articles.

/* 为列表项标记添加前导零 */
@counter-style zero-padded-example {
  system: extends decimal;
  pad: 3 "0";
}

Résumé

Je pense que ce sont des moyens très intéressants d'utiliser des balises de liste dans CSS, qui sont meilleures que ce que j'ai traditionnellement traité de tels problèmes. Et comme

devient la fonction de base "nouvellement disponible" en septembre 2023, il est bien pris en charge dans le navigateur.

@counter-style

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!