Ieskats CSS3 pirmās tipa konstrukcijas selektorā
Viena lieta, par ko es mīlu par CSS3, ir jauns papildinājums, kas ļauj mums mērķēt elementus tieši, nepaļaujot uz klasē, ID vai cita elementa atribūts, un tas, ko mēs aptversim, ir šāds selektors, : pirmais veids.
The : pirmais veids selektors atlasīs konkrētā elementa pirmo bērnu, piemēram, zemāk esošais fragments būs vērsts uz pirmo h2 Web lapā.
h2: pirmā veida / * stila deklarācija * /
The : pirmais veids ir vienāds ar : n-veida tips (1), tā vietā, lai izvēlētos tikai vispirms veida, mēs varam vēlreiz izvēlēties otro, trešo un tā tālāk. Nākamais fragments būs vērsts uz otro h2 elementu Web lapā.
h2: n-veida veids (2) / * stila deklarācija * /
: pirmais veids” pret. “: pirmais bērns”
Tas var šķist, ka šie divi selektori dara to pašu, bet tas tā nav. Redzēsim šādu demonstrāciju:
Pieņemsim, ka mums ir pieci rindkopu elementi, kas iesaiņoti a div, kā šis:
1. punkts
2. punkts
3. punkts
4. punkts
5. punkts
Tagad mēs vēlamies izvēlēties pirmo punktu, izmantojot : pirmais bērns selektoru.
p: pirmais bērns polsterējums: 5px 10px; robežu rādiuss: 2px; fons: # 8960a7; krāsa: #fff; robeža: 1px cietais # 5b456a;
Un, kā mēs to gaidījām, pirmais punkts ir veiksmīgi izvēlēts.
- : pirmā bērna demonstrācija
Tomēr, kad mēs pievienot citu elementu pirmajā rindkopā, pieņemsim, ka h1, kā tālāk redzamais fragments:
1. pozīcija
1. punkts
2. punkts
3. punkts
4. punkts
5. punkts
pirmā daļa netiks atlasīta, kā pirmais bērns iekšā div ir vairs nav punkts, bet tagad tas ir h1.
Tātad šī ir situācija, kad : pirmais veids selektors nāk, lai risinātu problēmu.
p: pirmās klases polsterējums: 5px 10px; robežu rādiuss: 2px; fons: # a8b700; krāsa: #fff; robeža: 1px cietais # 597500;
- : pirmās klases demonstrācija
The “Pēdējais” Selektors
Kur ir “vispirms”, tad būs arī “Pēdējais”.
Divu iepriekš aprakstīto selektoru otrā daļa ir šādi divi selektori; the :Pēdējais bērns un : pēdējā tipa. Tie būtībā ir tādi paši kā iepriekšminētie divi, izņemot tos, uz kuriem tie attiecas norādītā elementa pēdējais bērns.
Piemēram, šis fragments zemāk būs paredzēts pēdējam punktam div.
p: pēdējais bērns polsterējums: 5px 10px; robežu rādiuss: 2px; fons: # 8960a7; krāsa: #fff; robeža: 1px cietais # 5b456a;
- : pēdējā bērna demonstrācija
Un šis fragments būs vērsts arī uz pēdējo punktu tādā pašā situācijā, kā mēs iepriekš apspriedām; šoreiz tieši seko cits elements.
p: pēdējais-of-type polsterējums: 5px 10px; robežu rādiuss: 2px; fons: # a8b700; krāsa: #fff; robeža: 1px cietais # 597500;
- : pēdējā tipa demonstrācija
Selectivizr
Tāpat kā jebkura cita jauna CSS3 iezīme, šie selektori galvenokārt netiek atbalstīti vecajās pārlūkprogrammās Internet Explorer 6 līdz 8, ar izņēmumu : pirmais bērns selektors, jo tas ir pievienots kopš CSS2.1. Tās relatīvais :Pēdējais bērns tika pievienots tikai CSS3.
Tātad, ja visi šie šeit minētie atlasītāji tiešām ir nepieciešami jūsu tīmekļa vietnei, varat izmantot saucamo JavaScript bibliotēku Selectivizr emulēt šos CSS3 selektora funkcionalitāti.
Selectivizr ir atkarīgs no citām JavaScript bibliotēkām, lai strādātu, piemēram, jQuery, Dojo, Prototype un MooTools; un, skatoties no salīdzināšanas tabulas oficiālajā tīmekļa vietnē, MooTools, šķiet, spēj apstrādāt visus selektorus.
Tātad, pievienosim to kopā ar Selectivizr:
Iepriekš minētais nosacītais komentārs nodrošinās, ka šīs bibliotēkas tiks ielādētas tikai Internet Explorer 8 un zemāk.
Visbeidzot, jūs varat apskatīt demo no šādām saitēm, un tagad tam vajadzētu strādāt gan mūsdienu, gan vecās pārlūkprogrammās (IE8 un zemāk). Jūs varat arī lejupielādēt avota failu tālākai pārbaudei. Izbaudi.
- Demo
- Lejupielādēt avotu
