Pozrite sa do prvotriedneho štrukturálneho selektora CSS3
Jedna vec, ktorú milujem v CSS3, je nový doplnok výberov, ktorý nám umožňuje cielené prvky bez toho, aby sme sa spoliehali na trieda, id alebo iný prvok atribútu a ten, ktorý tu budeme pokrývať, je nasledujúci výber, : Prvé-of-type.
: Prvé-of-type selektor bude zameraný na prvé dieťa určeného prvku, napríklad útržok uvedený nižšie bude zacielený na prvý h2 na webovej stránke.
h2: deklarácia štýlu / * štýlu * /
: Prvé-of-type sa tiež rovná : N-teho o-typu (1), skôr než len výberom najprv typu, môžeme ďalej vybrať druhý, tretí a tak ďalej. Nasledujúci úryzok bude zacielený na druhý h2 prvku na webovej stránke.
h2: n-typ (2) / * deklarácia štýlu * /
: Prvé-of-type” proti. “: Prvé dieťa”
Možno sa zdá, že títo dva výberovia robia to isté, ale to tak nie je. Pozrime sa na nasledujúcu ukážku:
Povedzme, že máme päť prvkov odseku zabalených do a div, ako toto:
Pragraph 1
Pragraph 2
Pragraph 3
Pragraph 4
Pragraph 5
Teraz by sme chceli vybrať prvý odsek pomocou : Prvé dieťa volič.
p: prvé dieťa padding: 5px 10px; okraj polomeru: 2px; pozadie: # 8960a7; farba: #fff; hranica: 1px pevná # 5b456a;
A ako sme očakávali, prvý odsek bol úspešne vybraný.
- : Demo prvého dieťaťa
Keď však my pridajte iný prvok pred prvý odsek, povedzme jeden h1, ako útržok nižšie:
Položka 1
Pragraph 1
Pragraph 2
Pragraph 3
Pragraph 4
Pragraph 5
prvý odsek sa nezvolí, ako prvé dieťa vo vnútri div je už nie je odsek, ale teraz je h1.
Takže toto je situácia, keď : Prvé-of-type selektor prichádza k vyriešeniu problému.
p: prvý typ padding: 5px 10px; okraj polomeru: 2px; pozadie: # a8b700; farba: #fff; hranica: 1px pevná # 597500;
- : Demo prvého typu
“posledná” selektor
Kde existuje “najprv”, potom tam bude tiež “posledná”.
Na zadnej strane obidvoch voličov, ktoré sme diskutovali vyššie, sú dva výberové prvky; :posledné dieťa a : Last-of-type. V podstate sú rovnaké ako vyššie uvedené dva, okrem toho, že sú zamerané na posledné dieťa určeného prvku.
Napríklad, tento úryvok bude zameraný na posledný odsek vnútri div.
p: posledné dieťa padding: 5px 10px; okraj polomeru: 2px; pozadie: # 8960a7; farba: #fff; hranica: 1px pevná # 5b456a;
- : Demo posledného dieťaťa
Tento úryvok sa tiež zameria na posledný odsek v tej istej situácii, ako sme diskutovali vyššie. tentokrát nasleduje priamo iný prvok.
p: posledný typ padding: 5px 10px; okraj polomeru: 2px; pozadie: # a8b700; farba: #fff; hranica: 1px pevná # 597500;
- : demo posledného typu
Selektivizér
Rovnako ako všetky ostatné nové funkcie v systéme CSS3, tieto voľby nie sú podporované hlavne v starých prehliadačoch Internet Explorer 6 až 8, s výnimkou pre : Prvé dieťa ako bol pridaný od CSS2.1. Jeho relatívna :posledné dieťa bol pridaný iba v CSS3.
Takže ak všetky tieto selektory, ktoré sme tu uviedli, sú naozaj potrebné pre váš web, môžete použiť JavaScriptu knižnicu Selectivizr emulovať funkčnosť voliča CSS3.
Selektivizér je závislý na iných knižniciach JavaScriptu, aby mohli fungovať, ako napríklad jQuery, Dojo, Prototype a MooTools; a zdá sa, že z porovnávacej tabuľky na oficiálnej webovej stránke, MooTools sa zdá byť schopný zvládnuť všetky selektory.
Pridajme to spolu so Selectivizrom takto:
Podmienená poznámka uvedená vyššie zabezpečí, že tieto knižnice budú načítané iba v programe Internet Explorer 8 a nižšie.
Nakoniec môžete zobraziť demo z nasledujúcich odkazov a teraz by malo fungovať ako v moderných, tak starých prehliadačoch (IE8 a nižšie). Môžete tiež stiahnuť zdrojový súbor na ďalšie preskúmanie. Užite si to.
- demonštrácie
- Stiahnuť zdroj
