Bolehkah Anda Mengaplikasikan Berbilang :sebelum Pseudo-Elements kepada Elemen yang Sama?

Bolehkah Berbilang :sebelum Elemen Pseudo Wujud untuk Elemen yang Sama?

Soalan:

Adakah mungkin untuk menggunakan berbilang :before pseudo-elemen pada elemen yang sama? Contohnya:

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

Jawapan:

Tidak, CSS2.1 menentukan bahawa elemen hanya boleh mempunyai satu daripada sebarang jenis unsur pseudo pada bila-bila masa tertentu . Ini bermakna walaupun elemen boleh mempunyai kedua-dua :before dan :after pseudo-elemen, ia tidak boleh mempunyai lebih daripada satu daripada setiap jenis.

Akibatnya, apabila berbilang :before peraturan menyasarkan elemen yang sama, ia dilantunkan menjadi satu:sebelum unsur pseudo. Contohnya, kod di atas runtuh kepada:

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

Hanya pengisytiharan kandungan terakhir, yang mempunyai keutamaan tertinggi, berkuat kuasa.

Penyelesaian:

Jika anda ingin menggunakan berbilang :sebelum pseudo-elemen pada elemen yang sama, anda boleh menggunakan pemilih gabungan untuk menentukan dengan tepat perkara yang perlu dilakukan oleh penyemak imbas. Contohnya:

.circle.now:before {
    content: "○";
}
.circle.now:hover:before {
    background: #ccc;
}

Ini akan mencipta dua :before pseudo-elemen dengan kandungan dan gaya yang berbeza.

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