Bolehkah Berbilang :sebelum Pseudo-elemen Digunakan pada Elemen HTML Tunggal?

Berbilang :sebelum Pseudo-elemen: Gambaran Keseluruhan Sekatan

Soalan:

Boleh berbilang :sebelum pseudo-elemen digunakan pada HTML tunggal elemen?

Jawapan:

Malangnya, tidak mungkin untuk mempunyai berbilang :sebelum unsur pseudo untuk elemen yang sama dalam CSS2.1. Satu elemen hanya boleh mempunyai satu daripada sebarang jenis unsur pseudo pada satu masa, termasuk :sebelum dan :selepas.

Penjelasan:

Apabila berbilang :before peraturan dikenakan kepada elemen yang sama, mereka melata dan bergabung menjadi satu :before pseudo-element. Hanya peraturan paling teratas, dengan keutamaan tertinggi, mempunyai pengisytiharannya digunakan. Ini selaras dengan cara lata berfungsi untuk sifat CSS biasa.

Oleh itu, dalam contoh anda:

.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

Hanya peraturan kedua akan digunakan dan outputnya ialah:

.circle.now:before {
    content: "Now";
    font-size: 19px;
    color: black;
}

Pendekatan Alternatif:

Untuk mengatasinya pengehadan, anda boleh sama ada:

• Gabungkan berbilang peraturan ke dalam satu pemilih, seperti .circle.now:before, yang akan menggunakan kedua-dua peraturan pada elemen.
• Gunakan CSS prapemproses seperti Sass atau Less, yang membolehkan anda menyarangkan pemilih dan mencipta berbilang :before pseudo-elemen untuk perkara yang sama elemen.

Atas ialah kandungan terperinci Bolehkah Berbilang :sebelum Pseudo-elemen Digunakan pada Elemen HTML Tunggal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!