Apprenez-en davantage sur :is() et :where() en CSS pour rendre votre code de style plus concis !

Cet article vous donnera une compréhension approfondie de deux sélecteurs plus efficaces en CSS. Grâce à eux, vous pouvez utiliser moins de code pour sélectionner des éléments plus efficacement, simplifiant ainsi le code.

Lorsque les nouveaux arrivants débutent avec CSS, ils sont souvent plus confus par deux choses (pensées personnelles) : 1. CSS est basé sur le flux de documents, et parfois le code écrit ne répond pas à vos attentes ! 2. Sélecteurs complexes, quels sélecteurs doivent être utilisés dans différents scénarios, et les sélecteurs sont trop longs, ce qui rend les nouveaux arrivants très confus. Un tel morceau de code a été récemment découvert dans le code de l'entreprise.

.home .col .card a i.i1,
.home .col .card a i.i2,
.home .col .card a i.i3,
.home .col .card a i.i4,
.home .col .card a i.i5,
.home .col .card a i.i5,
.home .col .card a i.i6,
.home .col .card a i.i7 {
  background-size: 35px;
  width: 60px;
  height: 42px;
  margin: auto;
}

À première vue, il y en a vraiment beaucoup. En tant que personne qui passe la main, j'étais vraiment abasourdie. Ça doit être trop long.

Vous pouvez utiliser votre petit cerveau et essayer différentes solutions pour simplifier l'abréviation de ce code !

Dans cet article, nous parlerons des sélecteurs plus efficaces de CSS3, garantissant des sélecteurs accrocheurs.

 : is

sélectionnez les éléments plus efficacement avec moins de code ! 666, génial ! ! !

Pour faire simple, le code est simplifié en extrayant des sélecteurs communs !

Remarque : :is() nom original :match()

Exemple 1. Global:is

Scénario : lors du développement front-end, dans certains cas, la couleur du texte peut être la même dans différents divs de.

Par exemple, dans les trois divs ci-dessous, la couleur du texte des trois divs est entièrement rouge.

    <div class="div1">
        <p>p1</p>
    </div>
    <div class="div2">
        <p>p2</p>

    </div>
    <div class="div3">
        <p>p3</p>
    </div>

Version basique (novice)

Pour de nombreux novices, la méthode d'écriture suivante apparaîtra en effet : définir le même p pour différents divs.

.div1>p{
    color:red;
}
.div2>p{
    color:red;
}
.div3>P{
    color:red;
}

Version avancée

À mesure que le nombre de codes écrits augmente, les novices découvrent progressivement qu'il existe de nombreux codes courants qui peuvent être extraits. Par exemple, color:red peut être extrait ici. Wow, le code a été beaucoup réduit instantanément ! ! !

.div1>p,
.div2>p,
.div3>P{
    color:red;
}

Version avancée (:is)

A ce moment, le novice ressentit à nouveau, puisque la couleur :rouge peut être évoquée, pourquoi pas p ? La version suivante, plus concise, est donc apparue.

:is(.div1,.div2,.div3) >P {
  color:red;
}

Exemple 2 Élément spécifique : is

Regardez le code ci-dessous Nous voulons nous rendre compte que la couleur du div est rouge, et la définition de la couleur est dans textColor, et garder p noir.

<div class="textColor">
        p1
</div>
<div class="textColor">
    p2
</div>
<div class="textColor">
    p3
</div>
<p class="textColor">p4</p>

Après avoir lu l'exemple 1 ci-dessus, je suppose que certains novices commenceront à écrire comme ceci : ajoutez directement de nouveaux styles à la balise p.

:is(.textColor) {    color:red;

}.pColor{   color: black;
}
<p class="textColor pColor">p4</p>

Mais : is supporte l'écriture d'éléments spécifiques : il suffit d'ajouter

div:is(.textColor) {
    color:red;
}

devant :is : is

div:is(.textColor) :is(h1,h4){
  color:red;
}
<div class="textColor">
  <h1>h1</h1>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
</div>

weight

:is Le poids est l'identifiant fourni, déterminé par des sélecteurs tels que des éléments, cela peut être difficile à comprendre. Un exemple le fera immédiatement comprendre.

<ol id="olID">
    <li>li1</li>
    <li>li2</li>
</ol>

Changeons la couleur de la police de li.

:is(ol) li {
  color: red;
}
ol li {
  color: blue;
}

Vous pouvez deviner de quelle couleur il s'agit.

est bleu : Pourquoi ? Premièrement, le paramètre de is est ol, ce qui est cohérent avec le poids du sélecteur ol ci-dessous. Et comme le bleu est en bas, le navigateur utilise automatiquement le bleu pour couvrir le rouge.

Regardez l'écriture ci-dessous, on ajoute un identifiant au paramètre is : #olID, et la couleur finale est rouge. En effet, il utilise un sélecteur d'identification de poids plus élevé.

 :is(ol,#olID) li {
        color: red;
      }
      ol li {
        color: blue;
      }

:where

 : Les paramètres de syntaxe de Where et :is sont exactement les mêmes. La seule différence est que le poids de Where est toujours 0, ou le plus humble. Toujours le même exemple ci-dessus.

<ol id="olID">
  <li>li1</li>
  <li>li2</li>
</ol>

Ici, nous :

:where(ol,#olID) li {
  color: red;
}
ol li {
  color: blue;
}

Le résultat final est bleu

Scénario d'application

Parce que je dois dire, pourquoi avons-nous besoin de :où maintenant que nous avons est Personnellement, je pense :où est encore très ? utile. Par exemple, lors du développement d'une bibliothèque de composants, elle peut être utilisée, car le poids de Where est très faible, il est donc facile pour les utilisateurs de la couvrir, et il n'y a besoin de rien d'important, de v-deep, etc.

PS : Les petites châtaignes dans la préface peuvent être optimisées

Adresse originale : https://juejin.cn/post/7005366966554722312

Auteur : Front-end picker

Pour plus de connaissances sur la programmation, veuillez visiter : Vidéos 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!