Kadang kala boleh diinginkan untuk membuang margin atas atau kiri dari elemen pertama dalam bekas. Begitu juga, margin kanan atau bawah dari elemen terakhir dalam bekas. Anda boleh melakukannya dengan menerapkan kelas ke HTML secara manual:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )Memusatkan "atas" / "bawah" berguna dengan tumpukan elemen menegak, sifar "kiri" / "kanan" berguna untuk baris mendatar (secara umum). Tetapi… kaedah ini bergantung pada anda menambahkan kelas ke HTML sendiri. Pemilih semu boleh menjadi cara yang lebih baik dan tidak mengganggu:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Anda mungkin mahu mengganti * dengan pemilih yang lebih spesifik mengikut keperluan anda.
"Setiap Ketiga", dll.
Katakan anda mempunyai blok 9 elemen, 3 hingga 3. Sangat biasa anda mungkin perlu mengeluarkan margin kanan dari item ke-3, ke-6 dan ke-9. Pemilih pseudo anak ke-9 mungkin dapat membantu di sana:
* > :nth-child(3n+3) ( margin-right: 0; )Persamaan di sana, 3n + 3, berfungsi seperti ini:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
dll.
jQuery
jQuery menggunakan pemilih CSS3, yang merangkumi: anak pertama,: anak terakhir, dan: nth-anak (). Ini bermaksud bahawa dalam penyemak imbas yang tidak atau tidak sepenuhnya mendukung pemilih ini, mereka AKAN bekerja di jQuery, jadi anda boleh mengganti sokongan CSS dengan sokongan JavaScript. Sebagai contoh:
$("* > :nth-child(3n+3)").css("margin-right", 0);Sokongan penyemak imbas
: anak pertama dan: anak terakhir berfungsi dalam siaran terbaru dari semua penyemak imbas utama, tetapi tidak di IE 6.: anak pertama disokong dalam IE 7+. : nth-child berfungsi di Safari 3+, Firefox 3.5+, dan Chrome 1+, tetapi masih tidak berfungsi di IE8.
Lihat juga artikel David Oliver.