Pertanyaan Beberapa Kelas Pseudo CSS


Apa sintaks CSS yang tepat untuk menerapkan beberapa kelas pseudo ke pemilih. Saya ingin memasukkan "," setelah setiap item dalam daftar kecuali yang terakhir. Saya menggunakan css berikut:

ul.phone_numbers li:after {
    content: ",";
}

ul.phone_numbers li:last-child:after {
    content: "";
}

Ini berfungsi dengan baik pada FF3, Chrome, dan Safari 3. IE7 tidak berfungsi karena tidak mendukung: setelah (seperti yang diharapkan). Di IE 8 ini merender dengan koma setelah setiap li termasuk yang terakhir. Apakah ini masalah dengan IE8 atau sintaks saya salah? Tidak apa-apa jika tidak berfungsi di IE8 tapi saya ingin tahu apa sintaks yang tepat.


34
2018-01-29 20:21


asal


Jawaban:


:last-child adalah kelas pseudo, sedangkan :after (atau ::after di CSS3) adalah elemen pseudo.

Kutipan standar:

Kelas-kelas semu diijinkan di mana saja di selektor sementara elemen pseudo hanya dapat ditambahkan setelah pemilih sederhana terakhir dari pemilih.

Ini berarti sintaks Anda benar sesuai dengan CSS2.1 dan CSS3 juga, mis. IE8 masih menyebalkan;)


50
2018-01-29 20:33



Anda bisa menggunakan pemilih bersebelahan yang berdekatan:

ul.phone_numbers li + li:before {
   content: ",";
}

8
2018-01-29 20:33



Anda bisa mendapatkan ini dengan memiliki tag lain di dalam <li/> dan menerapkan :after untuk itu sebagai gantinya. Dengan cara itu Anda akan menerapkan :last-child dan :after ke berbagai elemen:

ul.phone_numbers li > span:after {
    content: ",";
}

ul.phone_numbers li:last-child > span:after {
    content: "";
}

3
2018-05-31 15:38



IE8 tidak mendukung last-child :( Mereka berfokus untuk memilah dukungan CSS 2.1, sepertinya microsoft belum mengadopsi Gecko atau Webkit namun saya tidak tahu.

http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#pseudoclasses


1
2018-01-29 20:28



Tidak ada masalah bersarang dengan penyeleksi kelas pseudo selama aturan yang diterapkan sesuai dengan elemen tertentu di pohon DOM. Saya ingin menggemakan kemungkinan styling dengan pemilih kelas pseudo dari situs web w3 . Itu berarti Anda juga dapat melakukan hal-hal seperti:

.ElClass > div:nth-child(2):hover {
    background-color: #fff;
    /*your css styles here ... */
}

1
2018-05-03 17:17