Apakah yang dilakukan oleh ampersand (&) dalam elemen pseudo CSS apabila digabungkan dengan KURANG?

Memahami Ampersand (&) dalam CSS Pseudo-Elements

Dalam CSS, pseudo-elements boleh digunakan untuk menambah gaya pada elemen tanpa mengubah suai kandungan atau struktur HTML. Apabila digunakan bersama-sama dengan unsur pseudo, aksara ampersand (&) mempunyai tujuan tertentu.

Pertimbangkan coretan CSS berikut, sering dilihat dalam Twitter Bootstrap:

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

Dalam kod ini , ampersand (&) digunakan sebelum unsur pseudo :sebelum dan :selepas. Ini menunjukkan bahawa gaya yang digunakan pada elemen pseudo hanya terpakai apabila digunakan pada elemen induk dengan kelas ".clearfix".

Perlu ambil perhatian bahawa sintaks ini bukan asli kepada CSS. Ia berasal daripada LESS, prapemproses CSS. Dalam LESS, ampersand (&) membenarkan sarang pengubah pemilih. Contohnya:

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

Kod ini akan dikompilkan kepada:

.clearfix:before {
  content: '';
}

Kehadiran ampersand (&) memastikan bahawa pemilih bersarang dikompilasi kepada ".clearfix:before". Tanpa itu, kod yang terhasil ialah ".clearfix :before".

Ringkasnya, apabila digunakan bersama unsur pseudo dalam LESS, aksara ampersand (&) membenarkan penyarangan pengubah suai pemilih, oleh itu menyediakan cara yang mudah untuk menggunakan gaya khusus kepada keturunan unsur tertentu.

Atas ialah kandungan terperinci Apakah yang dilakukan oleh ampersand (&) dalam elemen pseudo CSS apabila digabungkan dengan KURANG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!