Bolehkah Berbilang :sebelum Elemen Pseudo Digunakan pada Elemen Yang Sama?

Berbilang :sebelum Elemen Pseudo untuk Elemen Yang Sama

Bolehkah berbilang :before elemen pseudo digunakan pada elemen HTML yang sama?

Pertimbangkan perkara berikut senario:

<p>Is it possible to have multiple :before pseudos for the same element?</p>

<pre class="brush:php;toolbar:false">.circle:before {
    content: "CF";
    font-size: 19px;
}
.now:before{
    content: "Now";
    font-size: 19px;
    color: black;
}

Dalam CSS2.1, elemen hanya boleh memiliki satu unsur pseudo bagi setiap jenis pada bila-bila masa. Oleh itu, apabila berbilang :before peraturan menyasarkan elemen yang sama, ia melata untuk membentuk satu :before unsur pseudo. Dalam contoh yang diberikan, hasilnya adalah seperti berikut:

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

Pengisytiharan kandungan yang paling baru diisytiharkan diutamakan, manakala pengisytiharan lain dibuang. Tingkah laku ini serupa dengan sifat CSS biasa.

Untuk menggunakan berbilang elemen pseudo dengan kandungan berbeza pada elemen, buat peraturan CSS tambahan menggunakan pemilih gabungan. Sebagai contoh, anda boleh menggunakan .circle.now:before atau .now.circle:before untuk menyasarkan elemen dan menentukan kandungan yang diingini untuk setiap elemen pseudo.

Spesifikasi CSS warisan mencadangkan sintaks untuk memasukkan berbilang : :before dan ::after pseudo-elements dengan lata serasi CSS2.1. Walau bagaimanapun, ciri ini belum dilaksanakan dan tidak mungkin disertakan dalam spesifikasi akan datang.

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