Bagaimana untuk Menggayakan Elemen dengan :nth-child dan :before dalam IE8?

Had Keserasian Penyemak Imbas untuk :nth-child dan :before dalam IE8

Internet Explorer 8 (IE8) memberikan cabaran unik apabila ia datang untuk melaksanakan elemen pseudo CSS seperti :nth-child dan :before. Walaupun pemilih ini disokong secara meluas dalam penyemak imbas moden, mereka MENAMPAKKAN had dalam IE8.

Satu isu sedemikian timbul apabila menggunakan :nth-child untuk menggayakan elemen tertentu dalam senarai. Seperti yang ditunjukkan oleh coretan CSS, pemilih #nav-primary ul li:nth-child(1) a:after menggunakan gaya pada elemen pseudo selepas tag anchor item senarai pertama. Walau bagaimanapun, pemilih ini gagal berfungsi dengan betul dalam IE8.

Pendekatan Alternatif Menggunakan Penggabung Adik Bersebelahan

Untuk memintas pengehadan ini, seseorang boleh menggunakan penggabung adik beradik bersebelahan ( ) bersama-sama dengan kelas pseudo anak pertama. Pendekatan ini berkesan mencapai hasil yang sama dengan menyasarkan adik-beradik seterusnya kepada anak pertama menggunakan struktur CSS berikut:

#nav-primary ul li:first-child a { ... }
#nav-primary ul li:first-child + li a { ... }
#nav-primary ul li:first-child + li + li a { ... }

Kaedah ini secara berkesan mencontohi tingkah laku :nth-child(1), :nth-child( 2), dan seterusnya. Walau bagaimanapun, ia mempunyai kelemahan kerana tidak menyokong variasi yang lebih kompleks bagi :nth-child() seperti :nth-child(odd) atau :nth-child(4n 3).

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Elemen dengan :nth-child dan :before dalam IE8?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!