Apakah yang Ampersand (&) Lakukan dalam LESS CSS Pseudo-Element Selectors?

Menyahmistikan Ampersand (&) dalam CSS Pseudo-Element Selectors

Apabila menemui kod seperti ini dalam CSS, adalah wajar untuk tertanya-tanya tentang kepentingan ampersand (& ) watak:

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

Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa sintaks ini bukan sebahagian daripada CSS. Sebaliknya, ia tergolong dalam prapemproses CSS yang dipanggil LESS.

LESS membolehkan anda menyarangkan pengubah suai pemilih menggunakan aksara ampersand. Ini membolehkan anda menulis kod yang ringkas dan boleh dibaca dengan mengelakkan pengulangan. Contohnya:

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

Ini akan dikompilkan kepada:

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

Ampersan memastikan bahawa pemilih bersarang dikompilasi kepada .clearfix:before. Tanpa itu, mereka akan menyusun kepada .clearfix :before, yang akan mengakibatkan pemilih CSS tidak sah.

Dalam contoh Twitter Bootstrap yang anda berikan, ampersand digunakan untuk menggunakan gaya pada elemen pseudo (::before dan ::selepas) yang dicipta sebagai anak kepada elemen .clearfix. Ini membolehkan anda mentakrifkan elemen pseudo ini secara ringkas dan mengekalkan struktur modular dalam CSS anda.

Atas ialah kandungan terperinci Apakah yang Ampersand (&) Lakukan dalam LESS CSS Pseudo-Element Selectors?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!