Was bewirkt das kaufmännische Und (&) in LESS-CSS-Pseudoelementselektoren?

Das kaufmännische Und (&) in CSS-Pseudoelementselektoren entmystifizieren

Wenn man in CSS auf Code wie diesen stößt, fragt man sich natürlich über die Bedeutung des kaufmännischen Und (&) ) Zeichen:

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

Es ist jedoch wichtig zu beachten, dass diese Syntax nicht Teil von CSS ist. Stattdessen gehört es zu einem CSS-Präprozessor namens LESS.

LESS ermöglicht Ihnen, Selektormodifikatoren mithilfe des kaufmännischen Und-Zeichens zu verschachteln. Dadurch können Sie prägnanten und lesbaren Code schreiben und Wiederholungen vermeiden. Zum Beispiel:

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

Dies wird kompiliert zu:

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

Das kaufmännische Und stellt sicher, dass die verschachtelten Selektoren zu .clearfix:before kompiliert werden. Ohne es würden sie zu .clearfix :before kompilieren, was zu einem ungültigen CSS-Selektor führen würde.

In dem von Ihnen bereitgestellten Twitter-Bootstrap-Beispiel wird das kaufmännische Und verwendet, um Stile auf Pseudoelemente (::before) anzuwenden und ::after), die als untergeordnete Elemente des .clearfix-Elements erstellt werden. Dadurch können Sie diese Pseudoelemente präzise definieren und eine modulare Struktur innerhalb Ihres CSS beibehalten.

Das obige ist der detaillierte Inhalt vonWas bewirkt das kaufmännische Und (&) in LESS-CSS-Pseudoelementselektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!