Comprendre le sélecteur de pseudo-classe CSS en 5 minutes : is :not

Cet article présente les pseudo-classes CSS : is et :not, et explique la relation entre is, not, les correspondances et tout

:not

La pseudo-classe CSS :not() représente les éléments qui ne correspondent pas à une liste de sélecteurs Puisqu'elle empêche la sélection d'éléments spécifiques, elle est connue. comme pseudo-classe de négation.

Ce qui précède est l'explication de MDN sur not

Apprentissage recommandé : Tutoriel vidéo CSS

Nous devrions pouvoir en avoir une compréhension générale à partir du seul nom Non-sélection, exclure les autres éléments entre parenthèses

L'exemple le plus simple, utiliser CSS changera la couleur de la police dans le div en bleu sans changer le code HTML, à l'exception de la balise P 🎜>À partir de l'exemple ci-dessus, vous pouvez clairement comprendre le rôle du sélecteur non pseudo-classe

Allons. mettez-le à niveau, demandez : sauf span et p dans le div, changez les autres couleurs de police en bleu

<div>
    <span>我是蓝色</span>
    <p>我是黑色</p>
    <h1>我是蓝色</h2>
    <h2>我是蓝色</h2>
    <h3>我是蓝色</h3>
    <h4>我是蓝色</h4>
    <h5>我是蓝色</h5>
</div>

Il existe une méthode plus concise, comme suivante, mais la compatibilité n'est pas très bonne pour le moment. recommandé d'utiliser

div span,div h2,div h3, div h4,{
  color: blue;
}

Sauf IE8, tous les principaux navigateurs le prennent actuellement en charge, vous pouvez l'utiliser en toute confiance

:est

Ce qui précède est l'explication de MDN

Avant de dire ceci, vous devez d'abord comprendre la relation entre les correspondances

les correspondances et c'est ?

matchs est la vie passée de is, mais c'est essentiellement la même chose, et son usage est exactement le même

Le sens du mot matches correspond très bien à sa fonction, mais il a la fonction opposée de not, as not Du côté opposé, les correspondances semblent vraiment déplacées cette fois, et les mots ne sont pas assez concis, donc il a été renommé Il y a aussi un problème https://github.com/w3c/. csswg-drafts/issues/3258, qui est à l'origine de son changement de nom

D'accord, maintenant nous savons que les correspondances et is sont en fait la même chose, alors comment est utilisé ?

Exemple : faites en sorte que la balise p sous l'en-tête et le main devienne bleue lorsque la souris est survolée

div:not(p){
  color: blue;
}

Méthode précédente

div:not(p):not(span){
  color: blue;
}

est la façon de l'écrire

div:not(p,span){
  color: blue;
}

À partir de l'exemple ci-dessus, vous pouvez probablement voir l'influence de est, mais cela ne reflète pas pleinement la puissance de est. Cependant, lorsque vous sélectionnez plus de contenu, en particulier ceux avec plus de niveaux, vous constaterez qu'il existe de nombreuses façons de le faire. write is. Pour être concis, prenez un exemple de MDN et regardez la méthode d'écriture précédente de

<header>
  <ul>
    <li><p>鼠标放上去变蓝色</p></li>
    <li><p>鼠标放上去变蓝色</p></li>
  </ul>
  <p>正常字体</p>
</header>
<main>
  <ul>
    <li><p>鼠标放上去变蓝色</p></li>
    <li><p>鼠标放上去变蓝色</p></li>
    <p>正常字体</p>
  </ul>
</main>
<footer>
  <ul>
    <li><p>正常字体</p></li>
    <li><p>正常字体</p></li>
  </ul>
</footer>

est la méthode d'écriture de

header ul p:hover,main ul p:hover{
  color: blue;
}

. à mesure que le niveau d'imbrication augmente, l'avantage de is devient de plus en plus évident

Après avoir parlé de is, il faut en connaître. Comme mentionné précédemment, c'est le remplacement des allumettes.

Oui, c'est également un substitut à any. Il résout certains des inconvénients de any, tels que les préfixes du navigateur, les performances de sélection, etc.

any fonctionne exactement de la même manière que c'est-à-dire que la seule différence est que la seule chose est qu'il doit être ajouté avec un préfixe de navigateur. L'utilisation est la suivante

:is(header, main) ul p:hover{
  color: blue;
}