Bolehkah Anda Mempunyai Berbilang :sebelum Elemen Pseudo pada Satu Elemen?

Multiple :before Pseudo-Elements

Bolehkah sesuatu elemen memiliki berbilang :before pseudo-elemen? Soalan ini timbul apabila menggunakan gaya pada elemen yang sama menggunakan jQuery, di mana hanya gaya terkini nampaknya berkuat kuasa.

Penghadan CSS2.1

Dalam CSS2.1, elemen hanya boleh mempunyai satu unsur pseudo jenis tertentu pada bila-bila masa. Oleh itu, elemen boleh mempunyai kedua-dua :sebelum dan :selepas unsur pseudo, tetapi tidak lebih daripada satu daripada setiap satu.

Tingkah Laku

Berbilang :sebelum peraturan untuk elemen yang sama dilantunkan dan digunakan pada satu :sebelum unsur pseudo. Peraturan dengan keutamaan tertinggi, biasanya yang terakhir, diguna pakai. Dalam contoh yang disediakan:

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

Hanya pengisytiharan kandungan dalam peraturan terakhir, "Sekarang", akan digunakan. Pengisytiharan selebihnya dibuang, serupa dengan sifat elemen biasa.

Menggabungkan Pemilih

Jika berbilang pemilih sepadan dengan elemen yang sama dan anda ingin menggunakan semua gaya mereka, jana tambahan Peraturan CSS dengan pemilih gabungan. Untuk contoh yang diberikan, ini ialah .circle.now:before atau .now.circle:before.

Spesifikasi Kandungan CSS3 Legasi

Kandungan css3 yang ditamatkan spesifikasi mencadangkan notasi untuk memasukkan berbilang ::before dan ::after pseudo-elemen yang serasi dengan CSS2.1 lata. Walau bagaimanapun, ciri ini sudah lapuk dan tidak dilaksanakan oleh mana-mana penyemak imbas.

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