Que fait l'esperluette (&) dans les sélecteurs de pseudo-éléments LESS CSS ?

Démystifier l'esperluette (&) dans les sélecteurs de pseudo-éléments CSS

Lorsque vous rencontrez un code comme celui-ci en CSS, il est naturel de s'interroger sur la signification de l'esperluette (& ) caractère :

<code class="css">.clearfix {
  *zoom: 1;
  &amp;:before,
  &amp;:after {
    display: table;
    content: "";
  }
  &amp;:after {
    clear: both;
  }
}</code>

Cependant, il est important de noter que cette syntaxe ne fait pas partie du CSS. Au lieu de cela, il appartient à un préprocesseur CSS appelé LESS.

LESS vous permet d'imbriquer les modificateurs de sélecteur à l'aide du caractère esperluette. Cela vous permet d'écrire du code concis et lisible en évitant les répétitions. Par exemple :

<code class="less">.clearfix { 
  &amp;:before {
    content: '';
  }
}</code>

Ceci sera compilé en :

<code class="css">.clearfix:before {
  content: '';
}</code>

L'esperluette garantit que les sélecteurs imbriqués se compilent en .clearfix:before. Sans cela, ils compileraient en .clearfix :before, ce qui entraînerait un sélecteur CSS invalide.

Dans l'exemple Twitter Bootstrap que vous avez fourni, l'esperluette est utilisée pour appliquer des styles aux pseudo-éléments (::before et ::after) qui sont créés en tant qu'enfants de l'élément .clearfix. Cela vous permet de définir ces pseudo-éléments de manière concise et de maintenir une structure modulaire au sein de votre 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!