Bolehkah Anda Memohon Berbilang :sebelum Pseudo-Elements kepada Elemen Tunggal?

Bolehkah Berbilang :sebelum Pseudo-Elements Meningkatkan Elemen Yang Sama?

Pengenalan:
Semasa menggunakan CSS, persoalan biasa timbul: bolehkah berbilang :sebelum pseudo-elemen digunakan pada satu elemen? Untuk memahami jawapannya, mari kita mendalami konsep unsur pseudo dan terokai cara ia berinteraksi dengan lata.

Unsur Pseudo CSS dan Lata:
Dalam CSS2.1 , elemen boleh memiliki hanya satu unsur pseudo jenis tertentu pada satu masa, seperti :sebelum atau :selepas. Ini bermakna elemen boleh mempunyai kedua-duanya, tetapi bukan berbilang kejadian daripada jenis yang sama.

Contoh Menggunakan jQuery:
Seperti yang ditunjukkan dalam kod yang diberikan, cuba menggunakan berbilang :sebelum pseudo -elemen kepada satu elemen menggunakan jQuery menghasilkan hanya yang terakhir mengambil kesan:

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

Gelagat Melata:
Apabila berbilang :before peraturan digunakan pada elemen yang sama, ia mengikut peraturan melata, di mana peraturan itu mempunyai keutamaan yang lebih tinggi (yang terakhir ) mengatasi yang lain. Ini menghasilkan satu elemen pseudo :before dengan pengisytiharan daripada peraturan terakhir sahaja, seperti dalam yang berikut:

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

Mengatasi Had:
Jika berbilang :before pengisytiharan dikehendaki untuk elemen yang sama, seseorang perlu membuat peraturan CSS tambahan dengan pemilih gabungan. Ini membenarkan penentuan gelagat yang diingini untuk kombinasi kelas yang berbeza:

.circle.now:before { /* Specific rule for .circle with .now */ }
.now.circle:before { /* Specific rule for .now with .circle */ }

Legasi CSS dan Perkembangan Masa Depan:
Spesifikasi kandungan css3 yang ditamatkan dicadangkan untuk memasukkan berbilang elemen pseudo menggunakan tatatanda serasi dengan lata CSS2.1. Walau bagaimanapun, ciri ini tidak pernah dilaksanakan. Pada masa ini, draf css-content-3 dan css-pseudo-4 meninggalkan ciri ini kerana kekurangan minat.

Atas ialah kandungan terperinci Bolehkah Anda Memohon Berbilang :sebelum Pseudo-Elements kepada Elemen Tunggal?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!