Vaadake CSS3-le esmakordset tüüpi struktuurivalijat
Üks asi, mida ma armastan CSS3-st, on uus valik, mis võimaldab meil sihtelemente konkreetselt sihtida ilma, et see toetuks klassi, id või muu elemendi atribuut ja see, mida me siin katma, on järgmine valija, : esmane.
The : esmane Valija suunab määratud elemendi esimese lapse, näiteks allpool olev fragment puudutab esimest h2 veebisaidil.
h2: esimese tüübi / * stiilis deklaratsioon * /
The : esmane on samuti võrdne : n-nda-tüüpi (1), selle asemel, et valida ainult esiteks tüüpi, saame veel valida teise, kolmanda ja nii edasi. Järgmine lõik on suunatud teisele h2 veebilehe element.
h2: n-nda-tüüpi (2) / * stiilis deklaratsioon * /
: esmane” vs. “: esimene laps”
See võib tunduda, et need kaks valijat teevad sama asja, kuid see pole nii. Vaatame järgmist demonstratsiooni:
Oletame, et meil on viis lõikelementi, mis on pakitud a div, nagu nii:
Lõige 1
Lõige 2
Lõige 3
Lõige 4
Lõige 5
Nüüd tahaksime valida esimese lõigu kasutades : esimene laps valija.
p: esimene laps polster: 5px 10px; raadius: 2px; taust: # 8960a7; värv: #fff; piir: 1px tahke # 5b456a;
Ja nagu me oleme oodanud, valitakse esimene lõik edukalt.
- : esimese lapse demo
Kuid kui me lisage eelnevalt teine element esimeses lõigus öeldakse, et h1, nagu allolev väljavõte:
Rubriik 1
Lõige 1
Lõige 2
Lõige 3
Lõige 4
Lõige 5
esimest lõiku ei valitud, esimene laps sees div on ei ole enam lõik, kuid on nüüd h1.
Niisiis, see on olukord, kus : esmane Valik tuleb probleemi lahendamiseks.
p: esmakordne polster: 5px 10px; raadius: 2px; taust: # a8b700; värv: #fff; piir: 1px tahke # 597500;
- : esmane demo
The “Viimane” Valija
Kus on “esiteks”, siis on ka “viimane”.
Kahe ülalkirjeldatud selektori tagakülg on järgmised kaks selektorit; the :viimane laps ja : viimast tüüpi. Põhimõtteliselt on need samad, mis ülalnimetatud kaks, välja arvatud juhul, kui nad on suunatud määratud elemendi viimane laps.
Näiteks see allpool olev fragment puudutab viimast lõiku div.
p: viimane laps polster: 5px 10px; raadius: 2px; taust: # 8960a7; värv: #fff; piir: 1px tahke # 5b456a;
- : viimase lapse demo
Ja see fragment puudutab ka viimast lõiku samas olukorras, nagu me eespool arutlesime; seekord sellele järgneb vahetult teine element.
p: viimane-of-type polster: 5px 10px; raadius: 2px; taust: # a8b700; värv: #fff; piir: 1px tahke # 597500;
- : viimast tüüpi demo
Selectivizr
Nagu kõik teised uued funktsioonid CSS3-s, neid vanu brausereid enamasti ei toetata Internet Explorer 6 kuni 8, välja arvatud : esimene laps valija, kuna see on lisatud alates CSS2.1-st. Selle suhteline :viimane laps lisati ainult CSS3-s.
Seega, kui kõik need siin mainitud valijad on teie veebi jaoks tõesti vajalikud, saate kasutada kutsutud JavaScripti teeki Selectivizr nende CSS3 valija funktsionaalsuse jäljitamiseks.
Selectivizr sõltub töötamiseks teistest JavaScript-raamatukogudest, näiteks jQuery, Dojo, Prototype ja MooTools; ja vaadates võrdlustabelist ametlikul veebilehel, näib MooTools olevat võimeline kõiki valikuid käsitsema.
Niisiis, lisame selle koos Selectivizriga järgmiselt:
Ülaltoodud tingimuslik kommentaar tagab, et need raamatukogud laaditakse ainult Internet Exploreris 8 ja allpool.
Lõpuks saate vaadata demot järgmistest linkidest ja see peaks nüüd töötama nii kaasaegsetes kui ka vanades brauserites (IE8 ja allpool). Lähtefaili saate alla laadida ka edasiseks uurimiseks. Naudi.
- Demo
- Allalaadimise allikas
