Bagaimanakah Ampersand (&) Berfungsi dalam CSS Nested Selectors?

Pemilih Bersarang dalam CSS: Ampersand (&) Uncovered

Dalam bidang CSS, simbol ampersand (&) memainkan peranan penting peranan apabila digunakan dengan unsur pseudo. Pembangun menemui sintaks ini dalam pustaka seperti Twitter Bootstrap, tetapi sifat sebenar sintaksnya tidak kelihatan serta-merta.

What the Ampersand Does

Dalam contoh yang disediakan daripada Twitter Bootstrap , ampersand (&) digunakan dengan unsur pseudo :sebelum dan :selepas. Sintaks ini membenarkan sarang pengubah suai pemilih.

KURANG Sintaks, Bukan CSS

Adalah penting untuk ambil perhatian bahawa sintaks yang dimaksudkan bukan sebahagian daripada CSS tetapi milik kepada LESS, prapemproses yang memanjangkan CSS. KURANG memudahkan proses pembangunan dengan menyediakan ciri dan fungsi tambahan.

Contoh Penggunaan dan Penyusunan

Contoh berikut menggambarkan bagaimana ampersand (&) berfungsi:

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

Kod ini akan dikompilkan kepada:

.clearfix:before {
  content: '';
}

Tanpa ampersand (&), kod akan dikompilkan kepada:

.clearfix :before {
  content: '';
}

Dengan menggunakan ampersand (&), pemilih bersarang menyusun kepada .clearfix:before, manakala tanpanya, ia menyusun kepada .clearfix:before. Perbezaan ini penting untuk penggayaan yang betul.

Atas ialah kandungan terperinci Bagaimanakah Ampersand (&) Berfungsi dalam CSS Nested Selectors?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!