Joskus voi olla toivottavaa poistaa ylä- tai vasen marginaali astian ensimmäisestä elementistä. Samoin säiliön viimeisen elementin oikea tai alareuna. Voit tehdä tämän soveltamalla luokkia manuaalisesti HTML-koodiin:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )"Ylä" / "alin" nollaaminen on hyödyllistä pystysuoran pinoelementtien kanssa, "vasen" / "oikea" nollaus on hyödyllinen vaakasuorilla riveillä (yleensä). Mutta ... tämä menetelmä riippuu siitä, oletko lisännyt luokkia itse HTML-koodiin. Pseudovalitsimet voivat olla parempi vähemmän häiritsevä tapa edetä:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Voit halutessasi korvata * tarkemmilla valitsimilla tarpeidesi mukaan.
"Joka kolmas" jne.
Sanotaan, että sinulla oli kelluva lohko, jossa oli 9 elementtiä, 3: lla 3: lla. On hyvin yleistä, että sinun on ehkä poistettava oikea marginaali 3., 6. ja 9. kohdasta. N: nnen lapsen pseudovalitsin voi pystyä auttamaan siellä:
* > :nth-child(3n+3) ( margin-right: 0; )Siellä oleva yhtälö 3n + 3 toimii näin:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
jne.
jQuery
jQuery käyttää CSS3-valitsimia, joihin kuuluvat: first-child,: last-child ja: nth-child (). Tämä tarkoittaa, että selaimissa, jotka eivät tue tai eivät tue täysin näitä valitsimia, ne TOIMIVAT jQueryssä, joten voit korvata CSS-tuen JavaScript-tuella. Esimerkiksi:
$("* > :nth-child(3n+3)").css("margin-right", 0);Selaimen tuki
: first-child ja: last-child toimii viimeisimmässä versiossa kaikista tärkeimmistä selaimista, mutta ei IE 6: ssa: first-child on tuettu IE 7+ -käyttöjärjestelmässä. : n. lapsi toimii Safari 3+: ssa, Firefox 3.5+: ssa ja Chrome 1+: ssa, mutta ei silti toimi IE8: ssa.
Katso myös David Oliverin artikkeli.