Kartais gali būti pageidautina pašalinti viršutinę arba kairę paraštę iš pirmo konteinerio elemento. Taip pat dešinioji arba apatinė paraštė nuo paskutinio konteinerio elemento. Tai galite padaryti rankiniu būdu pritaikydami klases HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )„Viršutinis“ / „apatinis“ nulio nustatymas yra naudingas su vertikaliu elementų kaupu, „kairės“ / „dešinės“ nulio nustatymas yra naudingas horizontalioms eilutėms (apskritai). Bet ... šis metodas priklauso nuo to, ar jūs patys įtraukiate klases į HTML. Pseudo selektoriai gali būti geresnis mažiau įkyrus būdas:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Galbūt norėsite pakeisti * konkretesniais selektoriais pagal savo poreikius.
„Kas trečias“ ir kt.
Sakykime, kad jūs turėjote 9 elementų bloką, kurį sudarė 3 iš 3. Labai dažnai gali reikėti pašalinti reikiamą paraštę iš 3, 6 ir 9 elementų. Devintasis vaiko pseudo selektorius gali padėti ten:
* > :nth-child(3n+3) ( margin-right: 0; )Ten lygybė 3n + 3 veikia taip:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
ir kt.
jQuery
„jQuery“ naudoja CSS3 selektorius, į kuriuos įeina: pirmasis vaikas, paskutinis vaikas ir n-asis vaikas (). Tai reiškia, kad naršyklėse, kuriose nėra arba nėra visiškai palaikomi šie selektoriai, jie dirbs „jQuery“, todėl CSS palaikymą galite pakeisti „JavaScript“ palaikymu. Pavyzdžiui:
$("* > :nth-child(3n+3)").css("margin-right", 0);Naršyklės palaikymas
: first-child ir: last-child veikia naujausiame visų pagrindinių naršyklių leidime, bet ne IE 6: pirmasis vaikas palaikomas IE 7+. : n-tas vaikas veikia „Safari 3+“, „Firefox 3.5+“ ir „Chrome 1+“, bet vis tiek neveikia IE8.
Taip pat žiūrėkite Davido Oliverio straipsnį.
