Poglej v CSS3 prvovrstni strukturni selektor
Ena stvar, ki mi je všeč pri CSS3, je nov dodatek selektorjev, ki nam omogoča, da ciljno usmerimo elemente, ne da bi se zanašali na razred, id ali drug atribut elementa, in tisti, ki ga bomo obravnavali tukaj, je naslednji izbirnik, : prva vrsta.
The : prva vrsta izbirnik bo ciljal prvega otroka podanega elementa, na primer spodnji odrezek bo usmerjen na prvega h2 na spletni strani.
h2: prvotna / * deklaracija sloga * /
The : prva vrsta je enako : nth-of-type (1), in ne izberete samo prvi vrste, lahko nadalje izberemo drugo, tretjo in tako naprej. Naslednji odrezek bo usmerjen na drugega h2 na spletni strani.
h2: nth-of-type (2) / * deklaracija sloga * /
: prva vrsta” vs. “: prvi otrok”
Morda se zdi, da ta dva selektorja delata isto stvar, vendar to ni tako. Poglejmo naslednjo predstavitev:
Recimo, da imamo pet elementov odstavkov, ovitih v a div, Všečkaj to:
1. \ T
2. \ T
3
Pragraf 4
5
Sedaj bi radi izbrali prvi odstavek z uporabo : prvi otrok izbirnik.
p: prvi otrok padding: 5px 10px; obrobni polmer: 2px; ozadje: # 8960a7; barva: #fff; meja: 1px trdna # 5b456a;
In kot smo pričakovali, je prvi odstavek uspešno izbran.
- : Demo za prvega otroka
Vendar, ko bomo dodajte drug element prej prvi odstavek, recimo a h1, kot spodnji odrezek:
Naslov 1
1. \ T
2. \ T
3
Pragraf 4
5
prvi odstavek ne bo izbran, kot prvi otrok v notranjosti div je ni več odstavka, zdaj pa je h1.
Torej, to je situacija, kjer : prva vrsta izbirnik pride do rešitve problema.
p: prvo-za-tip padding: 5px 10px; obrobni polmer: 2px; ozadje: # a8b700; barva: #fff; obroba: 1px trdna # 597500;
- : Demo prvega tipa
The “Zadnji” Izbirnik
Kje je “prvi”, potem bo tudi “zadnji”.
Na zadnji strani obeh selektorjev, ki smo jih obravnavali zgoraj, sta naslednja dva selektorja; : zadnji otrok in : zadnji tip. V bistvu so enaki kot zgornja dva, razen da ciljata zadnji otrok navedenega elementa.
Ta odrezek bo na primer ciljal zadnji odstavek v div.
p: zadnji otrok polnilo: 5px 10px; obrobni polmer: 2px; ozadje: # 8960a7; barva: #fff; meja: 1px trdna # 5b456a;
- : demo za zadnjega otroka
Ta odrezek bo ciljal tudi na zadnji odstavek v enakem položaju, kot smo razpravljali zgoraj; tokrat neposredno sledi drug element.
p: last-of-type polnilo: 5px 10px; obrobni polmer: 2px; ozadje: # a8b700; barva: #fff; obroba: 1px trdna # 597500;
- : Demo zadnjega tipa
Selectivizr
Kot vse druge nove funkcije v CSS3, ti selektorji niso podprti v starih brskalnikih Internet Explorer 6 do 8, z izjemo. \ t : prvi otrok izbirnik, kot je bil dodan od CSS2.1. Njena relativna : zadnji otrok je bil dodan samo v CSS3.
Torej, če so vsi ti selektorji, ki smo jih omenili tukaj, resnično potrebni za vaš webite, lahko uporabite imenik JavaScript Library Selectivizr posnemati funkcionalnost izbirnika CSS3.
Selectivizr je odvisen od drugih knjižnic JavaScripta, da bi deloval, kot so jQuery, Dojo, Prototype in MooTools; in videti iz primerjalne tabele na uradni spletni strani, se zdi, da je MooTools sposoben obravnavati vse selektorje.
Zato ga vključimo skupaj s selektivizatorjem, kot sledi:
Zgornji pogojni komentar bo zagotovil, da bodo te knjižnice naložene samo v Internet Explorerju 8 in spodaj.
Končno si lahko ogledate demo iz naslednjih povezav in zdaj naj deluje tako v modernih kot pri starih brskalnikih (IE8 in spodaj). Prav tako lahko prenesete izvorno datoteko za nadaljnji pregled. Uživajte.
- Demo
- Prenesi vir
