Pseudotriedy možno použiť na výber prvku skladby zo zoznamu. V tejto lekcii sa dozvieme o pseudotriede:n-té dieťa, ktoré môže byť vytvorené pre inú pseudotriedu a ktoré môže byť hnedé. Pseudo-class:nth-child vám umožňuje vybrať skupinu prvkov zo skrytých autorít. Najčastejšie sa používa na výber spárovaných a nepárových prvkov zo skupiny. Často je potrebné, aby stôl vyzeral ako zebra, pričom pozadie spárovaných a nepárových riadkov dáva rôzne farby.
Tr:nth-child (nepárne) ( // farba pozadia ) tr:nth-child (párne) ( // iná farba pozadia )
Ďalšia pseudotrieda:nth-child vám umožňuje oddeliť prvky z právnej moci do skupín a potom vybrať prvok piesne zo skupiny skinov, vikory a útočnej syntaxe:
Tr:n-té dieťa (an+b) ( )
Tu a znamená počet prvkov v skupine a b To znamená, ktorý prvok zo skupiny bude vybraný. Význam Yakshcho vikorystuvati 2n+1, potom sa prvky rozdelia do skupín po dvoch a vyberú sa prvé prvky zo skupiny vzhľadov, potom prvky s nespárovaným sériovým číslom. Význam Yakshcho vikorystuvati 2n+2, potom budú prvky opäť rozdelené do skupín po dvoch, ale teraz sa budú zhromažďovať ďalšie prvky skupiny vzhľadov, potom prvky s rovnakým sériovým číslom.
Rovnako ako zadok na pochopenie pseudotriedy: n-té dieťa si vyberáme pre tento dodatočný štvrtý prvok, t. j. štvrtý, ôsmy, dvanásty, šestnásty atď. púčik. Na tento účel rozdelíme prvky do skupín po štyroch a potom vyberieme štvrtý prvok.
Tr:nth-child (4n+4) ( // nastavenie štýlu pre štvrtý prvok vzhľadu)
Nižšie je uvedený zoznam desiatich prvkov a na výber prvkov, ktoré chcete vidieť, používame pseudotriedy: n-té dieťa,: prvé dieťa a: posledné dieťa.
Wikipedia pre pseudotriedu CSS:nth-child na výber jedného prvku
Priradením hodnoty k pseudo-triede:n-té dieťa ako číslo si môžete vybrať, ktorú časť skupiny chcete zobraziť:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
#selector_example li:nth-child (4) (veľkosť písma: 150
Na výber všetkých prvkov okrem prvých piatich použite pseudotriedu CSS:nth-child
Ako nastaviť vzhľad pseudotriedy: hodnota n-tého potomka n+číslo, môžete vybrať všetky prvky počnúc prvkom s týmto sériovým číslom:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
#selector_example li:nth-child (n+6) ( veľkosť písma: 150 %; font-weight:bold; farba:zelená; )
Wikipedia pre pseudotriedu CSS:nth-child na výber prvých piatich prvkov
Ak nastavíme hodnotu pseudotriedy: n-tého potomka ako zápornú n+číslo, vyberieme všetky prvky, ktoré sa nachádzajú pred prvkom s týmto sériovým číslom:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
#selector_example li:nth-child (-n+5) ( veľkosť-písma: 150 %; font-weight:bold; farba:zelená; )
Wikipedia pseudotrieda CSS:nth-child pre výber tretieho prvku vzhľadu
Pseudo-class:nth-child možno použiť na výber postupnosti prvkov zadaním počtu prvkov v postupnosti a poradového čísla požadovaného prvku. Ako nastaviť hodnotu 3n+1, bude vzhľad tretieho prvku, počnúc prvým:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
#selector_example li:nth-child (3n+1) ( veľkosť písma: 150 %; font-weight:bold; farba:zelená; )
Wikipedia pre pseudotriedu CSS:nth-child na výber nespárovaných prvkov
Pseudotriedu:n-té dieťa môžete nastaviť na nepárne, aby ste vybrali všetky prvky s nespárovanými poradovými číslami. Tobto, prvý, tretí, piaty, siedmy, deviaty a potom prvky. Je ešte jednoduchšie nastaviť farby pre susedné riadky tabuľky.
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
#selector_example li:nth-child (nepárne) ( veľkosť písma: 150 %; font-weight:bold; farba:zelená; )
Wikipedia pre pseudotriedu CSS:nth-child na výber všetkých rovnakých prvkov
Tento príklad ukazuje, kedy boli naposledy vybraté všetky prvky s rovnakými sériovými číslami. To znamená ďalší, štvrtinový, šiesty, ôsmy, desiaty atď. prvok:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
#selector_example li:nth-child (párne) ( veľkosť-písma: 150 %; font-weight:bold; farba:zelená; )
Wikipedia pseudotrieda CSS:prvé dieťa na výber prvého prvku
Ďalšia pseudotrieda: atmosféra prvého dieťaťa, prvý prvok:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
#selector_example li:first-child (veľkosť písma: 150 %; font-weight:bold; farba:zelená; )
Wikipedia pseudotrieda CSS:last-child pre výber posledného prvku
Pseudotrieda: first-child je pseudotrieda: last-child, ktorá vyberá zostávajúci prvok zo skupiny prvkov:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
#selector_example li:last-child (veľkosť písma: 150 %; font-weight:bold; farba:zelená; )
Wikipedia pseudotrieda CSS:nth-last-child pre výber posledného prvku
Môžete tiež použiť pseudotriedu: nth-last-child, ktorá kombinuje schopnosti pseudotried: last-child a: nth-child, aby ste začali od konca. Potom môžete vybrať prvok, ktorého sériové čísla sú z konca skupiny, napríklad zo skupiny desiatich prvkov môžete vybrať ďalší prvok z konca:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
#selector_example li:nth-last-child (2) (veľkosť písma: 150 %; font-weight:bold; farba:zelená; )
Zistite o možnostiach pseudotriedy: n-tému dieťaťu o pomoc "
Popis
Pseudotrieda :nth-child sa používa na štýlovanie prvkov na základe číslovania v strome prvkov.
Syntax
prvok:n-té dieťa(nepárne | párne |<число> | <выражение>) {...}
Význam
nepárne Všetky čísla nepárových prvkov. dokonca Všetci chlapci majú čísla prvkov. Sériové číslo podradeného prvku je podobné jeho otcovi. Číslovanie začína od 1, čo je prvý prvok v zozname. Zadáva sa v tvare an+b, kde a a b sú celé čísla a n je lekár, ktorý automaticky doplní hodnoty 0, 1, 2...Ak sa a rovná nule, nepíše sa a záznam sa skráti na b. Keďže b sa rovná nule, tiež sa neuvádza a zapisuje sa v tvare an . a a b môžu byť záporné čísla, kde sa znamienko plus zmení na znamienko mínus, napríklad: 5n-1.
Kvôli rôznym hodnotám a a b môžu byť výsledky záporné alebo rovné nule. K prvkom sa však pridávajú kladnejšie hodnoty prostredníctvom tých, ktorých číslovanie prvkov začína od 1.
V tabulke 1 sú uvedené rôzne možné výrazy a kľúčové slová a tiež je uvedené, ktoré čísla prvkov sa použijú.
HTML5 CSS3 IE Cr Op Sa Fx
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| Nafta | 16 | 34 | 62 | 74 | 57 |
| Zlato | 4 | 69 | 72 | 56 | 47 |
| Strom | 7 | 73 | 79 | 34 | 86 |
| Kameni | 23 | 34 | 88 | 53 | 103 |
V tomto prípade sa pseudotrieda :nth-child používa na zmenu štýlu prvého riadku tabuľky a na zobrazenie farby všetkých ďalších riadkov (obr. 1).
Existuje taký selektor, či skôr pseudotrieda titulov n-tého dieťaťa. Axis butt yogo wiki:
UL LI:n-té dieťa(3n+3) (farba:#CCC; )
Prečo sa obťažovať s kódom CSS, aby ste sa viac vznášali? Vyberie tretí prvok v strede zoznamu s odrážkami: 3., 6., 9., 12. atď. Pozrime sa, ako tento výraz funguje a čo ešte môžete získať za pomoc: n-té dieťa.
Všetko umiestnite medzi ruky. Selektor: n-té dieťa akceptuje dve kľúčové slová: párne a nepárne. Všetko je tu jednoduché: párne vyberie párové prvky, ako je 2., 4., 6. atď., a nepárne vyberá nespárované prvky, ako je 1., 3., 5. atď. d. d.
Ako môžete vidieť z prvého príkladu, :nth-child tiež preberá parameter vírusu. Zjednodušene povedané, inak sú to len čísla. Ak ich umiestnite na mašličku, vyberie sa len jeden prvok s rovnakým číslom. Napríklad, ako vybrať iba piaty prvok:
UL LI:n-té dieťa(5) ( farba:#CCC; )
Prejdime však na 3n+3 z prvého zadku. Ako funguje tretí prvok pokožky a čo produkuje? Celé zameranie je na jednoduchú zmenu a indukovanú úroveň algebry. Predstavte si n ako bezpočetné číslo, ktoré začína nulou. Potom pridajte žiarlivosť. Takže 3n sa rovná 3×n a všetky rovnice sa rovnajú (3×n)+3. Teraz nahradením n za čísla väčšie alebo rovné nule odstránime:
- (3×0) + 3 = 3 = 3. prvok
- (3 × 1) + 3 = 6 = 6. prvok
- (3×2) + 3 = 9 = 9. prvok potom.
A čo: n-té dieťa (2n + 1)?
- (2 × 0) + 1 = 1 = 1. prvok
- (2 × 1) + 1 = 3 = 3. prvok
- (2×2) + 1 = 5 = 5. prvok potom.
Tak prestaň! Aje ce te to isté, sho i odd. Potom možno nie je dobrý nápad dobyť túto Vislu? Prečo neudrieme prvý zadok do aplikácie? Čo ak namiesto 3n+3 napíšeme 3n+0 alebo jednoducho 3n?
- (3 × 0) = 0 = nič
- (3 × 1) = 3 = 3. prvok
- (3 × 2) = 6 = 6. prvok
- (3 × 3) = 9 = 9. prvok potom.
No, ako môžete povedať, výsledok bude rovnaký, čo znamená, že nie je potrebné +3. Negatívne významy môžeme používať s rovnakým úspechom, ako to vidíme v štúdiách. Napríklad 4n-1:
- (4 × 0) – 1 = –1 = nič
- (4 × 1) - 1 = 3 = 3. prvok
- (4 × 2) - 1 = 7 = 7. prvok atď.
Voľba -n sa môže zdať prekvapivá - ak je konečný výsledok negatívny, potom by sa nemali stratiť žiadne prvky vo výbere. Ak chcete pridať hodnotu a znova získať pozitívny výsledok, výber bude vyzerať jednoducho takto: pomocou neho môžete vybrať prvých n prvkov, napríklad: -n+3:
- -0 + 3 = 3 = 3. prvok
- -1 + 3 = 2 = 2. prvok
- -2 + 3 = 1 = 1. prvok
- -3 + 3 = 0 = nie je nič atď.
Na SitePointe je jeden dobrý s pekným nápisom, ktorý tu určite zverejním:
| n | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
|---|---|---|---|---|---|---|
| 0 | 1 | 1 | 4 | – | – | 3 |
| 1 | 3 | 5 | 8 | 4 | 3 | 2 |
| 2 | 5 | 9 | 12 | 8 | 8 | 1 |
| 3 | 7 | 13 | 16 | 12 | 13 | – |
| 4 | 9 | 17 | 20 | 16 | 18 | – |
| 5 | 11 | 21 | 24 | 20 | 23 | – |
Podpora prehliadača
Selektor:nth-child je jedným z mála selektorov CSS, ktorý je do istej miery podporovaný v súčasných prehliadačoch a absolútne nie je podporovaný v IE, povedzme IE8. Ak sa teda dostanete k tomu správnemu vpravo a ku konečnému výsledku učenia sa o technológii progresívneho vylepšovania, môžete ho pokojne použiť na rôzne dizajnové prvky, ako napríklad zatarasenie riadkov stola. Nie je však vhodné obmedzovať sa na závažnejšie ochorenia. Napríklad sa spoľahnite na nové miesto alebo odstráňte pravé pole z tretieho bloku pokožky v mriežke tri krát tri, aby pachy klesli do radu.
Pseudotriedy možno použiť na výber prvku skladby zo zoznamu. V tejto lekcii sa dozvieme o pseudotriede:n-té dieťa, ktoré môže byť vytvorené pre inú pseudotriedu a ktoré môže byť hnedé. Pseudo-class:nth-child vám umožňuje vybrať skupinu prvkov zo skrytých autorít. Najčastejšie sa používa na výber spárovaných a nepárových prvkov zo skupiny. Často je potrebné, aby stôl vyzeral ako zebra, pričom pozadie spárovaných a nepárových riadkov dáva rôzne farby.
Ďalšia pseudotrieda:nth-child vám umožňuje oddeliť prvky z právnej moci do skupín a potom vybrať prvok piesne zo skupiny skinov, vikory a útočnej syntaxe:
Tu a znamená počet prvkov v skupine a b To znamená, ktorý prvok zo skupiny bude vybraný.
chi vikorystuvati význam 2n+1, potom sa prvky rozdelia do skupín po dvoch a vyberú sa prvé prvky zo skupiny vzhľadov, potom prvky s nespárovaným sériovým číslom. Význam Yakshcho vikorystuvati 2n+2, potom budú prvky opäť rozdelené do skupín po dvoch, ale teraz sa budú zhromažďovať ďalšie prvky skupiny vzhľadov, potom prvky s rovnakým sériovým číslom.
Rovnako ako zadok na pochopenie pseudotriedy: n-té dieťa si vyberáme pre tento dodatočný štvrtý prvok, t. j. štvrtý, ôsmy, dvanásty, šestnásty atď. púčik. Na tento účel rozdelíme prvky do skupín po štyroch a potom vyberieme štvrtý prvok.
Nižšie je uvedený zoznam desiatich prvkov a na výber prvkov, ktoré chcete vidieť, používame pseudotriedy: n-té dieťa,: prvé dieťa a: posledné dieťa.
Wikipedia pre pseudotriedu CSS:nth-child na výber jedného prvku
Priradením hodnoty k pseudo-triede:n-té dieťa ako číslo si môžete vybrať, ktorú časť skupiny chcete zobraziť:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
Na výber všetkých prvkov okrem prvých piatich použite pseudotriedu CSS:nth-child
Ako nastaviť vzhľad pseudotriedy: hodnota n-tého potomka n+číslo, môžete vybrať všetky prvky počnúc prvkom s týmto sériovým číslom:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
Wikipedia pre pseudotriedu CSS:nth-child na výber prvých piatich prvkov
Ak nastavíme hodnotu pseudotriedy: n-tého potomka ako zápornú n+číslo, vyberieme všetky prvky, ktoré sa nachádzajú pred prvkom s týmto sériovým číslom:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
Wikipedia pseudotrieda CSS:nth-child pre výber tretieho prvku vzhľadu
Pseudo-class:nth-child možno použiť na výber postupnosti prvkov zadaním počtu prvkov v postupnosti a poradového čísla požadovaného prvku. Ako nastaviť hodnotu 3n+1, bude vzhľad tretieho prvku, počnúc prvým:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
Wikipedia pre pseudotriedu CSS:nth-child na výber nespárovaných prvkov
Pseudotriedu:n-té dieťa môžete nastaviť na nepárne, aby ste vybrali všetky prvky s nespárovanými poradovými číslami. Tobto, prvý, tretí, piaty, siedmy, deviaty a potom prvky. Je ešte jednoduchšie nastaviť farby pre susedné riadky tabuľky.
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
Wikipedia pre pseudotriedu CSS:nth-child na výber všetkých rovnakých prvkov
Tento príklad ukazuje, kedy boli naposledy vybraté všetky prvky s rovnakými sériovými číslami. To znamená ďalší, štvrtinový, šiesty, ôsmy, desiaty atď. prvok:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
Wikipedia pseudotrieda CSS:prvé dieťa na výber prvého prvku
Ďalšia pseudotrieda: atmosféra prvého dieťaťa, prvý prvok:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
Wikipedia pseudotrieda CSS:last-child pre výber posledného prvku
Pseudotrieda: first-child je pseudotrieda: last-child, ktorá vyberá zostávajúci prvok zo skupiny prvkov:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
Wikipedia pseudotrieda CSS:nth-last-child pre výber posledného prvku
Môžete tiež použiť pseudotriedu: nth-last-child, ktorá kombinuje schopnosti pseudotried: last-child a: nth-child, aby ste začali od konca. Potom môžete vybrať prvok, ktorého sériové čísla sú z konca skupiny, napríklad zo skupiny desiatich prvkov môžete vybrať ďalší prvok z konca:
Prvok 1
Prvok 2
Prvok 3
Prvok 4
Prvok 5
Prvok 6
Prvok 7
Prvok 8
Prvok 9
Prvok 10
Zistite schopnosti pseudotriedy n-tého dieťaťa pomocou „konštruktora n-tého dieťaťa“.
Niekedy pri navrhovaní stránok chcete štýly CSS trochu zautomatizovať.
Jedným z problémov, s ktorými sa môžete stretnúť, je výber všetkých spárovaných prvkov v zozname, tabuľke, bloku a iných prvkoch na webovej stránke.
Je samozrejme možné odovzdať elementu párového spevu nejaký druh spevu, ale je dobré, ak tých elementov nie je veľa. Pridávať všetko ručne nie je nikdy možné a nikdy nebude žiaduce.
Chcel by som vedieť o metóde, ktorá je založená na vikoristickej pseudotriede n-té dieťa.
Túto pseudotriedu, ktorá sa objavila v CSS3, je potrebné vziať do úvahy, pretože nemusí fungovať na starších prehliadačoch. Všetky možnosti, ktoré sa objavia vo vašom vikoristane, sú dokonca nepriateľské.
Jedným zo spôsobov, ako túto pseudotriedu v praxi definovať, je vybrať všetky prvky, ktoré je možné rozbaliť v strome HTML dokumentu.
Existuje množstvo možností, ktoré je možné implementovať. Poďme sa na ne pozrieť.
možnosť 1 Vikoristuvati parameter dokonca.
Povedzme, že máme takýto zoznam:
- Prvok 1
- Prvok 2
- Prvok 3
- Prvok 4
- Prvok 5
- Prvok 6
- Prvok 7
- Prvok 8
- Prvok 9
- Prvok 10
Ak chcete, aby sa všetky rovnaké prvky vo vašom zozname javili ako červené, musíte pridať štýl CSS:
Ul li:n-té dieťa(párne) (farba:#F00;)
V dôsledku toho sa objaví obraz.
Even je kľúčové slovo, ktoré znamená, že sa vyberú spárované prvky.
Garne rishennya, nie je to tak? Máme jeden riadok štýlov CSS.
Možnosť 2. Vikoristuvati parameter 2n.
Túto možnosť možno považovať za alternatívu. Hodnota 2n znamená, že povrch iného prvku bude ošetrený a povrch druhého prvku bude v skutočnosti rovnaký.
Axis yak tse mozhe buti vikoristane dlya stôl.
| Stovpets 1 | Stovpets 2&. t;td>6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
І CSS štýly
Tr:n-té dieťa(2n) (farba:#F00;)
Text pre párovaný prvok vzhľadu tr sa zmenil na červenú.
webgyry.info
Podpora prehliadača
| 12.0+ | 9.0+ | 3.5+ | 4.0+ | 9.6+ | 3.2+ |
Popis
Pseudotrieda:nth-child() vyberá podradené prvky na základe ich pozície (poradové číslo) v strede nadradeného prvku.
Syntax
:n-té dieťa (číslo) (mocnosť)Kruh oblúkov v palebnom argumente, rovnaký boti, je kľúčom k slovu, sme očíslovaní Virazom na Vighidi an+b, číslo de a і b il a n - a likilnik, automatické prijatie genitatívneho ibd 0, 2, 2, 2, 2, 2, 3, ….
Za dodatočným číslom môžete zadať špecifické sériové číslo podradeného prvku a nastaviť štýl podľa potreby:
/* vyberte tretiu položku v zozname */ ul li:nth-child(3) ( farba: červená; )
Existujú dve možné kľúčové slová: nepárne (nespárované) a párne (chlapi). Umožňujú vám vybrať podradené prvky, ktoré majú spárované alebo nepárové poradové čísla:
/* vyberte všetky riadky v tabuľke s nepárovým poradovým číslom */ tr:nth-child(nepárne) td (farba pozadia: strieborná; )
Časť výrazu „an“ vypočítava pozície podradených prvkov pomocou nasledujúceho vzorca: číslo * n, pretože n je lekár, namiesto ktorého sa pri výpočte automaticky nahrádzajú číselné hodnoty začínajúce od 0 a potom hodnoty zvýšenie o jednu Je väčšie ako predné: 0,1,2, 3 atď. Možno musíme vybrať tretiu položku v zozname, pre ktorú musíme napísať 3n:
ul li:nth-child(3n) ( farba: červená; )
3 * 0 = 0 – nie je vybraté nič
3 * 1 = tretí bod
3 * 2 = 6. bod
atď.
Časť výrazu „b“ vám umožňuje určiť, z ktorej pozície by mal výber prvkov začať. Možno musíme vybrať tretiu položku v zozname, počnúc inou položkou v zozname, pre ktorú musíme napísať ďalší krok 3n + 2:
Ul li: n-té dieťa (3n + 2) (farba: červená; )
Týmto spôsobom nasmerujte zoznam na nasledujúci vzorec:
(3 * 0) + 2 = iná položka
(3 * 1) + 2 = 5. bod
(3 * 2) + 2 = 8. bod
atď.
zadok:
| text |
| text |
| text |
| text |
| text |
| text |
| text |
| text |
| text |
| text |
Výsledok tohto príkladu:
puzzleweb.ru
Podpora prehliadača
Selektor: n-té dieťa
- jeden z mála selektorov CSS, ktorý je všeobecne podporovaný v súčasných prehliadačoch a absolútne nie je podporovaný v IE, nieto ešte IE8. Ak sa teda dostanete k tomu správnemu vpravo a ku konečnému výsledku učenia sa o technológii progresívneho vylepšovania, môžete ho pokojne použiť na rôzne dizajnové prvky, ako napríklad zatarasenie riadkov stola. Nie je však vhodné obmedzovať sa na závažnejšie ochorenia. Napríklad sa spoľahnite na nové miesto alebo odstráňte pravé pole z tretieho bloku pokožky v mriežke tri krát tri, aby pachy klesli do radu.
Riešením je tu knižnica jQuery, ktorá implementuje podporu pre všetky selektory CSS vrátane: n-tého dieťaťa v Internet Exploreri.
web-standards.ru
Význam tej stagnácie
Pseudotrieda :n-té dieťa() umožňuje vybrať podradené prvky v strede nadradeného prvku v závislosti od ich umiestnenia (poradové číslo).
Rozsah tejto pseudotriedy je širší, umožňuje vytvárať štýly riadkov v tabuľkách, zoznamoch a pridávať štýl k súvisiacim podradeným prvkom atď.
Syntax CSS:
:n-té dieťa(číslo | kľúčové slovo | vzorec)(Blok ohromený; )Vikoristanny zadok
Štylizácia podľa sériového čísla
Pozrime sa na príklad, v ktorom stojíte pred úlohou zmeniť štýl pre všetky prvky zobrazené na obrázku v oranžovej farbe:
Čo je zvláštne na prvkoch videných na obrázku? A na ich dvore majú vôňu oranžovej farby. Je to vtipné? Nerozmýšľaj. Stále majú prvky na dvore
Môžete si tiež všimnúť, že vaše sériové číslo bude tretie (tretí podradený prvok svojho otca ). Na štylizáciu týchto prvkov musíme vytvoriť pseudotriedu :n-té dieťa.
Poďme napríklad:
Prvý nadpis h2 značky tela
- jeden
- dva
- tri
Ďalšia h2 hlavička značky body
Prvý nadpis h2 značky článku
- jeden
- dva
- tri
:n-té dieťa prvky sme štylizovali
і
Výsledok nášho zadku:
Štylizácia za kľúčovým slovom
Jakov význam pre pseudotriedu :n-té dieťa() To môže zahŕňať poradový počet podradených prvkov, ktoré je potrebné upraviť, a kľúčové slová, ktoré dokážu identifikovať celú skupinu prvkov. Ako kľúčové slovo môžete použiť dva významy:
- dokonca (chlapské prvky)
- nepárne (nespárované prvky)
Štýl prvkov pomocou kľúčových slov je definovaný ešte širšie, takže v dokumente môžete vybrať a upraviť párové alebo nespárované podradené prvky.
Vytvorme napríklad dve jednoduché tabuľky s rôznymi triedami štýlu a pozrime sa na jasný rozdiel v hodnote kľúčových slov voči pseudotriede :n-té dieťa pre prvok HTML
| 1 riadok | pozícia | Množstvo |
|---|---|---|
| 2 riadok | ||
| 3 riadok | ||
| 4 riadok | ||
| 5 riadok |
| 1 riadok | pozícia | Množstvo |
|---|---|---|
| 2 riadok | ||
| 3 riadok | ||
| 4 riadok | ||
| 5 riadok |
Čia aplikácia patrí do pseudotriedy :n-té dieťa()štylizovali sme sa chlapi riadky prvej tabuľky (prvky
Štylizácia za jednoduchým matematickým vzorcom
Pseudotrieda :n-té dieťa() umožňuje vybrať spárované, nepárové a podradené prvky s rovnakým sériovým číslom a podradené prvky špecifikované elementárnym matematickým vzorcom. Pozrime sa na ofenzívny selektor a zistíme, čo tento záznam znamená:
td:n-té dieťa(4n+2)- 4n- Kozhen štvrtý prvok.
- 2
Vo vzorcoch je pre symbol povolená náhradná hodnota, ale nie je to potrebné:
td:n-té dieťa(4n-1)(farba pozadia: svetlomodrá; / * nastaviť farbu pozadia * / )Tento selektor znamená, že sa používa štvrtá polovica tabuľky (
- 4n- Kozhen štvrtý prvok.
- -1 - Začnite nejaký prvok.
Poďme sa pozrieť na zadok Vikoristanu:
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2 | |||||||||||||
| 3 | |||||||||||||
| 4 |
V ktorej aplikácii s príslušnou pseudotriedou: n-té dieťa sme vybrali a štylizovali vzhľad štvrtého okraja tabuľky (
basicweb.ru
Ako funguje selektor CSS n-tého potomka
CSS má selektor, presnejšie povedané, pseudoselektor nazývaný n-té dieťa. Butt yogo wikiristanya:
Ul li:nth-child(3n+3) ( farba: #ccc; )
CSS má problémy: stagnujúce štýly pre tretí prvok vzhľadu nečíslovaného zoznamu. A 3., 6., 9., 12. alebo tak. Ale yak tse pratsyuє? A ako možno odstrániť prospech z Vikoristu a n-tého dieťaťa?
Hlavný zmysel sa nachádza v blízkosti chrámov. n-té dieťa akceptuje dve kľúčové slová: dokonca(chlap) to zvláštny(Nepárované). Ich zmysel je úplne zdravý. Párne vyberie párové prvky (2, 4, 6), nepárne - nepárové prvky (1, 3, 5).
Ako je uvedené v prihláške, n-té dieťa je možné upraviť. Aký je najjednoduchší možný výraz? Len číslo. Ak napíšete ľubovoľné číslo do ramien, vyberie sa jeden jediný prvok. Napríklad vyberieme piaty prvok v zozname:
Ul li:nth-child(5) ( farba: #ccc; )
Obrátime sa na náš prvý zadok, kde máme vikoristali viráz (3n+3). ako pracuje? Prečo vstupuje do hry tretí prvok kože? Celá podstata slávneho n. Výhra nadobúda hodnoty väčšie alebo rovné nule. Poďme sa pozrieť na prehľad:
(3 x 0) + 3 = 3 = 3. prvok (3 x 1) + 3 = 6 = 6. prvok (3 x 2) + 3 = 9 = 9. prvok atď.
Teraz skúsme nasledujúci vírus: n-té dieťa (2n+1):
(2 x 0) + 1 = 1 = prvý prvok (2 x 1) + 1 = 3 = tretí prvok (2 x 2) + 1 = 5 = 5. prvok atď.
V dôsledku toho boli tie isté veci odstránené z odd, takže nie je potrebné často vikorizovať takúto frázu. Navyše, náš prvý príklad možno tiež zjednodušiť a nahradiť pôvodným vírusom (3n+3), vírusom (3n):
(3 x 0) + 0 = 0 = žiadny vzhľad (3 x 1) + 0 = 3 = tretí prvok (3 x 2) + 0 = 6 = 6. prvok atď.
Ako viete, výsledok je rovnaký, ale nie je potrebné písať „+3“. Vo víruse môžeme nájsť aj negatívne významy. Napríklad 4n-1:
(4 x 0) - 1 = -1 = žiadny vzhľad (4 x 1) - 1 = 3 = tretí prvok (4 x 2) - 1 = 7 = 7. prvok atď.
Počet záporných hodnôt pre koeficient pri n vyzerá trochu prekvapivo, pretože pre žiadny negatívny výsledok sa nenájde žiadna podobnosť. Budete musieť postupne meniť svoj výraz, aby ste pridali pozitívne prvky. Ako sa ukázalo, tento prístup je veľmi jednoduchým výberom prvých n prvkov. Pozrime sa na zadok s "-n+3":
0 + 3 = 3 = 3. prvok -1 + 3 = 2 = 2. prvok -2 + 3 = 1 = 1. prvok -3 + 3 = 0 = žiadna platnosť
Kompatibilita medzi prehliadačmi
nth-child je jedným z týchto novších atribútov, ktoré sú vhodné pre rôzne prehliadače, s výnimkou absolútnej nuly v IE od verzie 8. Preto, ak sa chystáte hovoriť o tejto téme, ak je konečným výsledkom čisto vizuálny efekt (napríklad maľovanie riadkov tabuľky), potom je to ideálny prístup. Ale, možno nie je dobrý nápad vikorizovať niečo za niečo dôležité, čo by napríklad mohlo narušiť správnosť rozloženia.
Samozrejme, ak používate jQuery, nemusíte sa tohto problému obávať, pretože jQuery zvykne fungovať v Internet Exploreri.
No, to je zatiaľ všetko
Môžete sa pohrať s rôznymi možnosťami voliča na strane so zadkom.
www.css-tricks.ru
Význam
| Význam | Popis |
|---|---|
| číslo | Kladné číslo 3 1. Určuje číslo prvku, ktorý chceme transformovať. Číslovanie prvkov začína od prvého. |
| zvláštny | Nespárované prvky. |
| dokonca | Párne prvky. |
| Viraz | Môžete pridať špeciálne výrazy s písmenom n, čo znamená všetky celé čísla v nula (nie jedna!) do nekonečna. Takže 2n znamená všetky spárované čísla (začínajúc od druhého). Ako tomu mám rozumieť? Čísla začínajúce od 0 sa zavádzajú do n postupne a tak ďalej: ak n = 0, potom 2n dáva 0, takýto prvok neexistuje ( číslovanie prvkov od 1!), ak n = 1, potom 2n dáva 2 ďalší prvok, ak n = 2, 2n dáva 4 - štvrtý prvok. Ak napíšete 3n - pokryje to tretí prvok (začínajúc tretím!) atď. |
Aplikujte to
Zadok
Tento zadok má červenú farbu, čo je 4. nástupište tvoj otec (4. v strede):
Výsledok wiki kódu:
Zadok
Nina rozdá všetko v červených minciach chlapi li:
Výsledok wiki kódu:
Zadok
Nina rozdá všetko v červených minciach nespárované li:
Výsledok wiki kódu:
Zadok
Nini sa podáva v červonimi tretina kože li (začínajúc tretím):
Výsledok wiki kódu:
Zadok
V selektore môžete určiť rozsah prvkov. Povedzme, že máte zoznam 20 prvkov a potrebujete vybrať prvky od 7 do 14 vrátane. Môžete to urobiť takto:
Výsledok wiki kódu:
kód.mu
Syntax
Pseudotrieda n-tého potomka špecifikovaná s jedným argumentom, ktorý predstavuje vzor na porovnávanie prvkov.
Hodnoty kľúčových slov
nepárne Predstavuje prvky, ktorých číselná pozícia v sériových súrodencoch je nepárna: 1, 3, 5 atď. párne Predstavuje prvky, ktorých číselná pozícia v rade súrodencov je párna: 2, 4, 6 atď.Funkčný zápis
Formálna syntax
:n-té dieťa(kde
kde
kde
kde
CSS nth-child je pseudotrieda, ktorá sa používa na výber prvkov pomocou číselného formátu. Na prvý pohľad môže byť syntax trochu mätúca.
Pozrime sa na túto štatistiku:
- rôzne spôsoby použitia: n-té dieťa;
- väčší volič: n-tého typu;
- A k nim priradené selektory sú: n-tého posledného dieťaťa a: n-tého posledného z typu.
:n-tý-posledný-typu
:nth-last-of-type vyberie podradené prvky, ktorých pozícia v dokumente sa zhoduje so vzorom, ktorý je popísaný algebraickým výrazom.
Selektor :nth-last-of-type vyzerá asi takto:
li:nth-child(viraz); ()
„Viraz“ môže byť reprezentované kľúčovými slovami párne alebo nepárne, celé číslo alebo vzorec pre vzorec an+b, kde aab sú celé čísla, kladné a záporné.
Pseudotrieda n-tého potomka CSS môže byť upravená tak, aby vybrala rozsah rôznych prvkov. Poďme sa pozrieť na kopu zadkov, aby bolo vo veci jasnejšie.
Mám zoznam s 12 prvkami. Zaujíma vás, ako môžete použiť :nth-child na výber prvku skladby alebo súboru prvkov za šablónou:
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
- lorem ipsum
Ak chcete vybrať tretí prvok v zozname, musíte zadať li:nth-child(3) . Ak chcete vybrať všetky spárované prvky, môžete použiť kľúčové slovo párne. Môžete tiež použiť :nth-child(nepárne) na výber všetkých prvkov s nespárovaným číslom.
N-té dieťa CSS je 3. – voliteľné li: n-té dieťa (3n). Ak chcete vybrať prvé prvky, vyberte li:nth-child(-n+4) . Ak chcete vybrať všetko okrem prvých štyroch prvkov, môžete vybrať li:nth-child(n+5).
Viraz an + b
Alternatívou k nepárnemu kľúčovému slovu je kľúčové slovo 2n+1. Ale yak tse pratsyuє?
Ak formát an+b obsahuje hodnoty aab, ktoré sú pod nulou, podradené prvky sa rozdelia do skupín. Keďže tento výraz je 2n+1, dcérske prvky sú rozdelené do skupín po dvoch. Element skinu skupiny má priradený index začínajúci 1. Hlavným prvkom v skupine kože je indexové číslo b. Zadoček bude mať prvý prvok.
Prvky 3n+2 sú zoskupené do troch prvkov a ďalší prvok v skupine pokožky predstavuje vírus.
Ak je hodnota b záporná, potom prvok s indexom b je konzistentný so skupinou. Ale vin vidrahovaetsya pri reverznom smere pri indexe 1. A tu konečný prvok nespočíva v danej skupine, ale v prednej skupine.
Kľúčové slovo aj CSS n-té dieťa môže buti virazhene yak 2n. Pre ktorý typ nemáme hodnotu b, potom sa vyberie prvok skinu skupiny s indexom a; 2n vyberie ďalší prvok, 3n - tretí prvok, 4n - štvrtý prvok.
Zvlášť oceňujem, že koncept rozdelenia vedľajších prvkov do skupín a hľadanie indexu vzhľadu pre skupinu pleti je dosť mätúci. Aj keď takto ich popisuje špecifikácia CSS selektorov.
Vhodnejší je koncept hľadania n-tého elementu kože - 2., 3. a 4. elementu kože. A potom je pre mňa ľahšie si uvedomiť, že ďalšia časť vírusu nie je vytlačená.
Vo vipadku 2n+1 čítam tento vírus takto: “ Nájdite ďalší prvok a posuňte zobrazenie nadol o 1».
Ak je 3n-5, znie to takto: „ Nájdite tretí prvok a posuňte zobrazenie na 5».
Ďalšie selektory:n-té dieťa
:nth-child je podtrieda :nth-last-child, ktorá funguje podobným spôsobom.
li:nth-last-child(3n) začína od zostávajúceho podradeného prvku a pridáva ho v opačnom smere, čím sa stáva tretím prvkom od konca zoznamu.
Táto pseudotrieda mensch expanzií. Často je potrebné vybrať prvý alebo posledný podradený prvok. Môžete použiť metódu :nth-child(1) alebo :nth-last-child(1), hoci táto metóda sa nepoužíva tak často ako pseudotriedy :first-child a :last-child. Avšak iba: first-child funguje v IE8, ale: last-child a: n-selectory nie.
:n-tý typ
Čo často považujem za nespokojné, je, že pseudotrieda n-tého potomka CSS vyberá podradené prvky za indexom a neukladá typ prvku.
Poďme sa pozrieť na útočnú pažbu.
Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue; Nunc sed turpis. Donec posuere vulputate arcu;lorem ipsum;
Časť je rozdelená na nadpisy, podnadpisy a niekoľko odsekov. Chcem, aby sa prvý odsek zobrazoval väčším písmom s veľkosťou 1,5 em.
Môžete vyskúšať sekciu kódu p:first-child , takže pre prvý odsek v tejto sekcii musíte nastaviť dodatočný štýl. To sa však nesčíta, pričom prvý podradený prvok zostane v sekcii h1. V tomto prípade je potrebné použiť selektor :first-of-type.
Existuje celý rad selektorov tohto typu: prvý typu,: posledný typu,: n-tý a: n-tý. Funguje to takto: n-té dieťa, ale vyberte n-i výskytov prvkov typu skladby.
Bolo to hodné?
Stlačte tlačidlo, s ktorým máte tú česť a pomôžete nám rozvinúť projekt. Ďakujem!