Pažvelkite į CSS3 pirmojo tipo struktūrinį pasirinkimą
Vienas dalykas, kurį myliu apie CSS3, yra naujas papildymas, leidžiantis tiksliai nukreipti elementus, nesiremiant klasė, ID arba kitas elemento atributas, o kitas, kurį mes padengsime, yra sekantis selektorius, : pirmos rūšies.
The : pirmos rūšies selektorius nukreips pirmąjį nurodyto elemento vaiką, pavyzdžiui, toliau pateikiamas fragmentas bus nukreiptas į pirmąjį h2 tinklalapyje.
h2: pirmojo tipo / * stiliaus deklaracija * /
The : pirmos rūšies taip pat yra lygus : n-ojo tipo (1), taip, o ne tik pasirinkti Pirmas tipo, galime toliau pasirinkti antrą, trečią ir pan. Šis fragmentas bus nukreiptas į antrąjį h2 elementas tinklalapyje.
h2: n-ojo tipo (2) / * stiliaus deklaracija * /
: pirmos rūšies” vs. “: pirmas vaikas”
Gali atrodyti, kad šie du selektoriai daro tą patį, bet taip nėra. Pažiūrėkime, kaip demonstruojama:
Tarkime, mes turime penkis pastraipos elementus, suvyniotus į a div, kaip šitas:
1 dalis
2 dalis
3 dalis
4 dalis
5 dalis
Dabar norėtume pasirinkti pirmąją pastraipą naudojant : pirmas vaikas selektorių.
p: pirmasis vaikas įdėklas: 5px 10px; pasienio spindulys: 2px; fonas: # 8960a7; spalva: #fff; siena: 1px kietas # 5b456a;
Ir kaip mes tikėjomės, pirmoji dalis bus sėkmingai pasirinkta.
- : pirmojo vaiko demonstracija
Tačiau, kai mes prieš tai pridėkite kitą elementą pirmoje pastraipoje, tarkime, a h1, kaip toliau pateikiamas fragmentas:
1 išlaidų kategorija
1 dalis
2 dalis
3 dalis
4 dalis
5 dalis
pirmoji pastraipa nebus pasirinkta, kaip pirmasis vaikas viduje div yra nebėra straipsnio, bet dabar yra h1.
Taigi, tai yra situacija, kai : pirmos rūšies pasirinktuvas atsijungia problemai išspręsti.
p: pirmos rūšies padding: 5px 10px; pasienio spindulys: 2px; fonas: # a8b700; spalva: #fff; siena: 1px kietas # 597500;
- : pirmojo tipo demonstracija
The “Paskutinis” Selektorius
Kur yra “Pirmas”, tada taip pat bus “paskutinis”.
Dviejų pirmiau aptartų selektorių atvirkštiniai yra šie du selektoriai; :Paskutinis vaikas ir : paskutinio tipo. Jie iš esmės yra tokie patys kaip pirmiau minėti du, išskyrus tuos, kuriems jie skirti paskutinio nurodyto elemento vaiko.
Pvz., Šis toliau pateiktas fragmentas bus nukreiptas į paskutinę pastraipą viduje div.
p: paskutinis vaikas įdėklas: 5px 10px; pasienio spindulys: 2px; fonas: # 8960a7; spalva: #fff; siena: 1px kietas # 5b456a;
- : paskutinio vaiko demonstracija
Ir šis fragmentas taip pat bus nukreiptas į paskutinę pastraipą tokioje pačioje situacijoje, kaip mes aptarėme anksčiau; šį kartą tiesiogiai po kito elemento.
p: paskutinio tipo padding: 5px 10px; pasienio spindulys: 2px; fonas: # a8b700; spalva: #fff; siena: 1px kietas # 597500;
- : paskutinio tipo demonstracija
„Selectivizr“
Kaip ir bet kuri nauja CSS3 funkcija, šie selektoriai dažniausiai nepalaikomi senosiose naršyklėse „Internet Explorer 6–8“, išskyrus : pirmas vaikas selektorius, nes jis buvo pridėtas nuo CSS2.1. Jo santykinis :Paskutinis vaikas buvo pridėta tik CSS3.
Taigi, jei visi šie čia paminėti pasirinkimo įtaisai tikrai reikalingi jūsų žiniatinklyje, galite naudoti „JavaScript“ biblioteką Selectivizr imituoti tuos CSS3 selektoriaus funkcionalumus.
„Selectivizr“ priklauso nuo kitų „JavaScript“ bibliotekų, kad galėtų dirbti, pvz., „JQuery“, „Dojo“, „Prototype“ ir „MooTools“; ir matydamas iš palyginimo lentelės oficialioje svetainėje, „MooTools“, atrodo, gali tvarkyti visus pasirinktuvus.
Taigi, pridėkime jį kartu su Selectivizr taip:
Aukščiau nurodyta sąlyginė pastaba užtikrins, kad šios bibliotekos bus įkeltos tik „Internet Explorer 8“ ir žemiau.
Galiausiai, galite peržiūrėti demo iš šių nuorodų ir dabar jis turėtų dirbti tiek šiuolaikinėse, tiek senose naršyklėse (IE8 ir žemiau). Taip pat galite atsisiųsti šaltinio failą tolesniam tyrimui. Mėgautis.
- Demo
- Atsisiųsti šaltinį
