Comment utiliser le sélecteur CSS :not()

En CSS, le sélecteur not est utilisé pour faire correspondre chaque élément de l'élément/sélecteur non spécifié, le format de syntaxe est ":not(selector)". Le sélecteur not peut définir le style de chaque élément non spécifié. Par exemple, ":not(p){background:red;" définit la couleur d'arrière-plan de chaque élément qui n'est pas un élément p.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3. Le sélecteur

:not() est utilisé pour la présentation de certaines fonctions spéciales. Laissez-moi vous donner un exemple de ce que j'utilise :

Quand votre souris. survolez Ces étiquettes changeront de couleur tout comme la deuxième étiquette.

Lorsque vous cliquez sur le premier intitulé « Secteur d'actifs », puis passez la souris dessus, vous ne voulez pas de cet effet spécial.

Comment mettre en œuvre ce changement ?

C'est très simple, utiliser le sélecteur &:not() peut facilement résoudre ce problème.

est défini sur W3CSchool :

 : le sélecteur not(selector) correspond à chaque élément qui n'est pas l'élément/sélecteur spécifié.

Regardez ce que je fais pour obtenir l'effet ci-dessus.

Code d'origine :

.pr-pos-box_tab {
  display: inline-block;
  margin-right: 5px;
  padding: 10px 12px 8px;
  color: @pr-dark-grey-2;
  font-size: 13px;
  font-weight: bold;
  background-color: @pr-middle-grey;  
  cursor: pointer;
  &:last-child{
    margin-right: 0;
  }
  &:hover{
    background-color: @pr-light-grey-7;
  }
}

Code modifié :

.pr-pos-box_tab {
  display: inline-block;
  margin-right: 5px;
  padding: 10px 12px 8px;
  color: @pr-dark-grey-2;
  font-size: 13px;
  font-weight: bold;
  background-color: @pr-middle-grey;  
  cursor: pointer;
  &:last-child{
    margin-right: 0;
  }
}
 
 
.pr-pos-box_tab:not(.pr-pos-box_tab--selected) {
  &:hover{
    background-color: @pr-light-grey-7;
  }
}

Vous voyez la différence ?

Oui~ J'ai utilisé not(.pr-pos-box_tab--selected) pour empêcher le survol d'affecter la balise pr-pos-box_tab--selected

L'effet après le changement d'image :

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

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!