A Look Into CSS3 First-Of-Type Structural Selector
Satu perkara yang saya sayangi tentang CSS3 ialah penambahan baru pemilih yang membolehkan kami menyasarkan unsur-unsur secara khusus tanpa bergantung kepada kelas, ID atau atribut unsur lain, dan satu yang akan kita pelajari di sini ialah pemilih berikut, : first-of-type.
The : first-of-type pemilih akan menyasarkan anak pertama elemen yang ditentukan, sebagai contoh, coretan di bawah akan menyasarkan yang pertama h2 di laman web.
h2: deklarasi gaya / * first-of-type * /
The : first-of-type juga sama dengan : nth-of-type (1), jadi bukannya memilih sahaja pertama jenis ini, kita boleh memilih lagi yang kedua, ketiga dan sebagainya. Coretan berikut akan menyasarkan kedua h2 elemen di laman web.
h2: nth-of-type (2) / * style declaration * /
: first-of-type” vs. “: anak pertama”
Ia mungkin kelihatan seperti kedua-dua pemilih melakukan perkara yang sama, tetapi itu bukan perkara yang sama. Mari lihat demonstrasi berikut:
Katakan kita mempunyai lima elemen perenggan yang dibungkus dalam a div, seperti ini:
Perenggan 1
Perenggan 2
Perenggan 3
Perenggan 4
Perenggan 5
Sekarang, kami ingin memilih perenggan pertama menggunakan : anak pertama pemilih.
p: anak pertama padding: 5px 10px; jejari sempadan: 2px; latar belakang: # 8960a7; warna: #fff; sempadan: 1px pepejal # 5b456a;
Dan seperti yang telah kami jangkakan, perenggan pertama berjaya dipilih.
- : Demo kanak-kanak pertama
Walau bagaimanapun, apabila kita tambah unsur yang berbeza sebelum ini perenggan pertama, katakanlah h1, seperti coretan berikut:
Tajuk 1
Perenggan 1
Perenggan 2
Perenggan 3
Perenggan 4
Perenggan 5
perenggan pertama tidak akan dipilih, sebagai anak pertama di dalam div adalah tidak lagi perenggan, tetapi sekarang h1.
Jadi, ini adalah keadaan di mana : first-of-type pemilih datang untuk menyelesaikan masalah ini.
p: first-of-type padding: 5px 10px; jejari sempadan: 2px; latar belakang: # a8b700; warna: #fff; sempadan: 1px pepejal # 597500;
- : Demo pertama-jenis
The “Terakhir” Pemilih
Di mana ada “pertama”, maka akan ada juga “lepas”.
Sebaliknya kedua-dua pemilih yang telah dibincangkan di atas adalah dua pemilih berikut; yang :anak bongsu dan juga : last-of-type. Mereka pada dasarnya adalah sama dengan dua di atas, kecuali mereka menargetkan anak terakhir elemen yang ditentukan.
Sebagai contoh, coretan ini di bawah akan menyasarkan perenggan terakhir di dalam div tersebut.
p: kanak-kanak lepas padding: 5px 10px; jejari sempadan: 2px; latar belakang: # 8960a7; warna: #fff; sempadan: 1px pepejal # 5b456a;
- : Demo kanak-kanak lepas
Dan coretan ini juga akan menargetkan perenggan terakhir dalam keadaan yang sama seperti yang telah dibincangkan di atas; kali ini diikuti secara langsung oleh unsur yang berbeza.
p: last-of-type padding: 5px 10px; jejari sempadan: 2px; latar belakang: # a8b700; warna: #fff; sempadan: 1px pepejal # 597500;
- : Demo lepas jenis
The Selectivizr
Seperti mana-mana ciri baru lain dalam CSS3, pemilih ini tidak disokong dalam penyemak imbas lama, terutamanya Internet Explorer 6 hingga 8, dengan pengecualian untuk : anak pertama pemilih, kerana ia telah ditambahkan sejak CSS2.1. Saudara saudaranya :anak bongsu hanya ditambahkan dalam CSS3.
Jadi, jika semua pemilih yang telah kami sebutkan di sini sangat diperlukan untuk webite anda, anda boleh menggunakan Perpustakaan JavaScript yang dipanggil Selectivizr untuk mencontohi fungsi pemilih CSS3 tersebut.
Selectivizr bergantung kepada Perpustakaan JavaScript yang lain untuk berfungsi, seperti jQuery, Dojo, Prototaip dan MooTools; dan melihat dari jadual perbandingan di laman web rasmi, MooTools nampaknya dapat mengendalikan semua pemilih.
Jadi, mari masukkannya bersama dengan Selectivizr, seperti berikut:
Komen bersyarat di atas akan memastikan bahawa perpustakaan-perpustakaan ini hanya akan dimuatkan di Internet Explorer 8 dan di bawah.
Akhirnya, anda boleh melihat demo dari pautan berikut dan kini kini berfungsi baik dalam penyemak imbas moden dan lama (IE8 dan di bawah). Anda juga boleh memuat turun fail sumber untuk pemeriksaan lanjut. Nikmati.
- Demo
- Muat turun Sumber
