En titt på CSS3 först-av-typ strukturell väljare
En sak som jag älskar om CSS3 är det nya tillägget av selektorer som tillåter oss att rikta in sig specifikt utan att förlita sig på klass, id eller annat element attribut, och en som vi kommer att täcka här är följande väljare, : Första i-typ.
De : Första i-typ väljaren kommer att rikta sig till det första barnet i det angivna elementet, till exempel kommer utsnittet nedan att rikta sig mot det första h2 på webbsidan.
h2: förstklassig / * stildeklaration * /
De : Första i-typ är också lika med : N: te-of-typ (1), så snarare än att bara välja först av typen kan vi ytterligare välja den andra, den tredje och så vidare. Följande kod kommer att rikta sig mot det andra h2 element på webbsidan.
h2: nth-of-type (2) / * stildeklaration * /
: Första i-typ” mot. “:förstfödde”
Det kan tyckas att dessa två väljare gör samma sak, men det är inte så. Låt oss se följande demonstration:
Låt oss säga att vi har fem styckselement inslagna inom a div, så här:
Pragraph 1
Pragraph 2
Pragraph 3
Pragraph 4
Pragraph 5
Nu vill vi välja första stycket med hjälp av :förstfödde väljare.
p: första barnet vaddering: 5px 10px; gränsstråle: 2px; bakgrund: # 8960a7; färg: #fff; gräns: 1px fast # 5b456a;
Och som vi har väntat väljs första stycket väl.
- : första barns demo
Men när vi lägg till ett annat element innan första stycket, låt oss säga en h1, som snippet nedan:
Rubrik 1
Pragraph 1
Pragraph 2
Pragraph 3
Pragraph 4
Pragraph 5
första stycket kommer inte att väljas, som första barnet inne i div är inte längre en paragraf, men är nu en h1.
Så det här är situationen där : Första i-typ väljaren kommer att lösa problemet.
p: förstklassig vaddering: 5px 10px; gränsstråle: 2px; bakgrund: # a8b700; färg: #fff; gräns: 1px fast # 597500;
- : Demo av första typen
De “Sista” Väljare
Där finns det “först”, då kommer det också att finnas “sista”.
Den omvända av de två selektorerna som vi har diskuterat ovan är följande två selektorer; de :sista barnet och den : Sista av typ. De är i grunden samma som ovanstående två, förutom att de riktar sig mot sista barnet av det angivna elementet.
Exempelvis kommer detta stycke nedan att rikta in den sista stycket inom div.
p: sista barnet vaddering: 5px 10px; gränsstråle: 2px; bakgrund: # 8960a7; färg: #fff; gräns: 1px fast # 5b456a;
- : sista barns demo
Och detta stycke kommer också att riktas mot sista stycket i samma situation som vi har diskuterat ovan; den här gången följs direkt av ett annat element.
p: sista-of-typ vaddering: 5px 10px; gränsstråle: 2px; bakgrund: # a8b700; färg: #fff; gräns: 1px fast # 597500;
- : Demo av senaste typen
The Selectivizr
Precis som alla andra nya funktioner i CSS3, stöds dessa väljare inte i gamla webbläsare, främst Internet Explorer 6 till 8, med undantag för :förstfödde väljaren, eftersom den har lagts till sedan CSS2.1. Dess relativa :sista barnet var bara tillagt i CSS3.
Så, om alla dessa väljare som vi nämnde här verkligen behövs för din webbplats, kan du använda ett JavaScript-bibliotek som heter Selectivizr att emulera dessa CSS3 väljare funktionalitet.
Selectivizr är beroende av andra JavaScript-bibliotek för att kunna fungera, till exempel jQuery, Dojo, Prototype och MooTools; och ser från jämförelsetabellen på den officiella hemsidan, verkar MooTools kunna hantera alla selektorer.
Så, låt oss inkludera det tillsammans med Selectivizr, enligt följande:
Den villkorliga kommentaren ovan kommer att se till att dessa bibliotek bara laddas i Internet Explorer 8 och nedan.
Slutligen kan du se demoen från följande länkar och den ska nu fungera både i moderna och gamla webbläsare (IE8 och nedan). Du kan också ladda ner källfilen för vidare undersökning. Njut av.
- demo
- Hämta källa
