Que fait l'esperluette (&) dans les pseudo-éléments CSS lorsqu'elle est combinée avec LESS ?

Comprendre l'esperluette (&) dans les pseudo-éléments CSS

En CSS, les pseudo-éléments peuvent être utilisés pour ajouter un style aux éléments sans modifier le contenu ou la structure du HTML. Lorsqu'il est utilisé en conjonction avec des pseudo-éléments, le caractère esperluette (&) remplit un objectif spécifique.

Considérez l'extrait CSS suivant, souvent vu dans Twitter Bootstrap :

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

Dans ce code , l'esperluette (&) est utilisée avant les pseudo-éléments :before et :after. Cela indique que les styles appliqués aux pseudo-éléments ne sont applicables que lorsqu'ils sont appliqués à l'élément parent avec la classe ".clearfix".

Il est important de noter que cette syntaxe n'est pas native du CSS. Il provient de LESS, un préprocesseur CSS. Dans LESS, l'esperluette (&) permet l'imbrication des modificateurs de sélecteur. Par exemple :

.clearfix { 
  &:before {
    content: '';
  }
}

Ce code sera compilé en :

.clearfix:before {
  content: '';
}

La présence de l'esperluette (&) garantit que le sélecteur imbriqué se compile en ".clearfix:before". Sans cela, le code résultant serait ".clearfix :before".

En résumé, lorsqu'il est utilisé en conjonction avec des pseudo-éléments dans LESS, le caractère esperluette (&) permet l'imbrication des modificateurs de sélecteur, ainsi fournissant un moyen pratique d'appliquer des styles spécifiquement aux descendants d'un élément donné.

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!