Et kig på CSS3 første-of-type strukturelle vælger
En ting, jeg elsker om CSS3 er, er den nye tilføjelse af selektorer, der tillader os at målrette elementer specifikt uden at stole på klasse, id eller andre elementattributter, og en, som vi vil dække her, er den følgende vælger, : Første af typen.
Det : Første af typen vælgeren vil målrette mod det første barn i det angivne element, for eksempel vil udsnittet nedenfor målrette mod den første h2 på websiden.
h2: Første-of-type / * stildeklaration * /
Det : Første af typen er ligeledes lig med : N'te-of-typen (1), så i stedet for at vælge kun først af typen kan vi yderligere vælge den anden, den tredje og så videre. Følgende uddrag vil målrette mod det andet h2 element på websiden.
h2: nth-of-type (2) / * stildeklaration * /
: Første af typen” vs. “: Første barn”
Det ser ud til at disse to selektorer gør det samme, men det er ikke tilfældet. Lad os se følgende demonstration:
Lad os sige, at vi har fem afsnit elementer indpakket i a div, sådan her:
Pragraph 1
Pragraph 2
Pragraph 3
Pragraph 4
Pragraph 5
Nu vil vi gerne vælge det første afsnit ved hjælp af : Første barn vælgeren.
p: første barn polstring: 5px 10px; grænse-radius: 2px; baggrund: # 8960a7; farve: #fff; grænse: 1px fast # 5b456a;
Og som vi har forventet, vælges første afsnit med succes.
- : Demo fra første barn
Men når vi Tilføj et andet element før første afsnit, lad os sige en h1, som udsnittet nedenfor:
Udgiftsområde 1
Pragraph 1
Pragraph 2
Pragraph 3
Pragraph 4
Pragraph 5
Første afsnit vælges ikke, som det første barn inde i div er ikke længere et afsnit, men er nu en h1.
Så det er den situation, hvor : Første af typen vælgeren kommer til at løse problemet.
p: first-of-type polstring: 5px 10px; grænse-radius: 2px; baggrund: # a8b700; farve: #fff; grænse: 1px fast # 597500;
- : Demo af første type
Det “Sidst” Selector
Hvor er der “først”, så vil der også være “sidst”.
Bagsiden af de to selektorer, som vi har diskuteret ovenfor, er følgende to selektorer; det :sidste barn og : Sidste-of-typen. De er stort set de samme som de ovennævnte to, medmindre de målretter mod sidste barn af det specificerede element.
For eksempel vil denne uddrag nedenfor målrette mod det sidste afsnit i div.
p: sidste barn polstring: 5px 10px; grænse-radius: 2px; baggrund: # 8960a7; farve: #fff; grænse: 1px fast # 5b456a;
- : Demo fra sidste barn
Og dette stykke vil også målrette mod det sidste afsnit i samme situation som vi har diskuteret ovenfor; denne gang den følges direkte af et andet element.
p: sidste-of-type polstring: 5px 10px; grænse-radius: 2px; baggrund: # a8b700; farve: #fff; grænse: 1px fast # 597500;
- : Demo af sidste type
The Selectivizr
Som alle andre nye funktioner i CSS3 understøttes disse selektorer primært ikke i gamle browsere Internet Explorer 6 til 8, med en undtagelse for : Første barn vælger, som den er blevet tilføjet siden CSS2.1. Dens relative den :sidste barn blev kun tilføjet i CSS3.
Så hvis alle disse vælgere vi har nævnt her virkelig er nødvendige for din webside, kan du bruge et JavaScript-bibliotek, der hedder Selectivizr at efterligne disse CSS3 vælgerens funktionalitet.
Selectivizr er afhængig af andre JavaScript-biblioteker for at kunne arbejde, såsom jQuery, Dojo, Prototype og MooTools; og ser fra sammenligningstabellen på den officielle hjemmeside, synes MooTools at kunne klare alle selektorer.
Så lad os medtage det sammen med Selectivizr som følger:
Den betingede kommentar ovenfor sikrer, at disse biblioteker kun indlæses i Internet Explorer 8 og nedenfor.
Endelig kan du se demoen fra følgende links, og den skal nu fungere både i moderne og gamle browsere (IE8 og nedenfor). Du kan også downloade kildefilen til yderligere undersøgelse. god fornøjelse.
- Demo
- Download kilde
