Egy pillantás a CSS3-ra, első típusú szerkezeti kiválasztó
Az egyik dolog, amit szeretek a CSS3-ról, az az új szelektorok hozzáadása, amelyek lehetővé teszik számunkra, hogy az elemeket célszerűen célozzuk meg, anélkül, hogy a osztály, id vagy más elem attribútum, és az, amit itt fogunk fedezni, a következő választó, : Az első-of-típusú.
A : Az első-of-típusú A szelektor a megadott elem első gyermekét fogja célozni, például az alábbi részletre az első h2 a weboldalon.
h2: első típusú / * stílusú nyilatkozat * /
A : Az első-of-típusú is egyenlő : N-edik-of-típusú (1), ahelyett, hogy csak a első a második, a harmadik és így tovább. A következő részlet a másodikra vonatkozik h2 elemet a weboldalon.
h2: nth-of-type (2) / * stílus deklaráció * /
: Az első-of-típusú” vs. “:első gyerek”
Úgy tűnik, hogy ezek a két szelektor ugyanezt csinálják, de ez nem így van. Nézzük meg a következő bemutatót:
Tegyük fel, hogy öt bekezdéseleme van a csomagban div, mint ez:
1. bekezdés
2. bekezdés
3. bekezdés
4. bekezdés
5. bekezdés
Most szeretnénk az első bekezdést a :első gyerek választó.
p: első gyermek padding: 5px 10px; határ-sugár: 2px; háttér: # 8960a7; szín: #fff; határ: 1px szilárd # 5b456a;
És amint azt vártuk, az első bekezdés sikeresen kiválasztásra kerül.
- : első gyermek demó
Amikor azonban mi add hozzá egy másik elemet az első bekezdés, mondjuk egy h1, tetszik a következő részlet:
1. fejezet
1. bekezdés
2. bekezdés
3. bekezdés
4. bekezdés
5. bekezdés
az első bekezdés nem lesz kiválasztva, mint az első gyermek div jelentése már nem egy bekezdés, de most egy h1.
Tehát ez a helyzet, ahol a : Az első-of-típusú a választó a probléma megoldásához jön.
p: első típusú padding: 5px 10px; határ-sugár: 2px; háttér: # a8b700; szín: #fff; határ: 1px szilárd # 597500;
- : első típusú demó
A “Utolsó” Választó
Ahol van “első”, akkor ott lesz a “utolsó”.
A fentiekben tárgyalt két szelektor hátoldala a következő két szelektor; a :utolsó gyerek és a : Last-of-típusú. Alapvetően ugyanazok, mint a fenti kettő, kivéve, ha a célpontot célozzák a megadott elem utolsó gyermeke.
Például az alábbi töredék az utolsó bekezdést célozza meg a div.
p: utolsó gyermek padding: 5px 10px; határ-sugár: 2px; háttér: # 8960a7; szín: #fff; határ: 1px szilárd # 5b456a;
- : utolsó gyermek demó
És ez a részlet a legutóbbi bekezdésre is ugyanabban a helyzetben fog megcélozni, mint amit a fentiekben tárgyaltunk; ezúttal a közvetlenül egy másik elem követi.
p: legutóbbi típusú padding: 5px 10px; határ-sugár: 2px; háttér: # a8b700; szín: #fff; határ: 1px szilárd # 597500;
- : utolsó típusú demó
A Selectivizr
A CSS3 minden más új funkciójához hasonlóan ezek a szelektorok nem támogatottak a régi böngészőkben Az Internet Explorer 6-8, kivételével :első gyerek szelektor, mivel hozzá lett adva a CSS2.1 óta. A relatív a :utolsó gyerek csak a CSS3-ban került hozzáadásra.
Tehát, ha mindazokat a választókat, amelyeket itt említettünk, valóban szükséges a webhelyére, akkor használhat egy JavaScript könyvtárat, amelyet hívott Selectivizr a CSS3 választó funkcióinak emulálása.
A Selectivizr más JavaScript könyvtáraktól függ, így például a jQuery, a Dojo, a Prototype és a MooTools; és a hivatalos honlapon az összehasonlító táblázatból látva, úgy tűnik, hogy a MooTools képes kezelni az összes választót.
Tehát vegyük fel a Selectivizr-tel együtt a következőképpen:
A fenti feltételes megjegyzés biztosítja, hogy ezek a könyvtárak csak az Internet Explorer 8-ban és az alatt kerüljenek betöltésre.
Végül megnézheti a demót a következő linkekből, és most mind a modern, mind a régi böngészőkben működik (IE8 és az alábbiakban). A forrásfájlt a további vizsgálathoz is letöltheti. Élvez.
- Demó
- Letöltés forrása
