Zdravo, dragi čitaoci! Nastavak predmeta CSS selektori želim da vam ponudim opis podružnica i kontekstualnih selektora, kao i njihovu komparativnu analizu, jer prema logici prijave, oni su vrlo slični, iako imaju razliku.

U svojim publikacijama sam detaljno ostao u različitim vrstama CSS selektora :; kao i . Usput, u poslednjem članku, u kojem se razlikuju različite vrste selektora atributa, detaljno sam opisao kako se moji teorijski proračuni mogu odmah provjeriti izmjenama u HTML i CSS kodu putem interneta ugrađenim pomoću ugrađenog Google Chrome-a () Alat. Takvi alati za uređivanje imaju najnovije izmjene svih popularnih preglednika, uključujući dodatak za Firebug za Firefox ().

Teorijski materijal ovog postupka može se proučiti i uređivanjem bilo koje stranice bilo koje web lokacije! Da biste to učinili, jednostavno pritisnite F12 ako koristite Google Chrome ili Mozilla Firefox (). A sada ću predstaviti sadržaj P oznake, na primjeru koje ćemo studirati slabe i kontekstualni CSS selektori:

Ovaj odlomak uključuje eM i jake oznake oblikovanjakoji dodjeljuju tekst debeo i italic.

Upotreba gore opisanog alata za uređivanje, ubacio sam ovaj odlomak direktno na ovaj članak, postigao odgovarajući tekst na lijevoj strani prozora za uređivanje, kao rezultat koji se pojavio tekst ovog stavka na samom vrhu stranice:

Ovaj HTML dizajn ,. Ovaj odlomak će biti eksperimentalan u današnjoj publikaciji, na svom primjeru pokazat ću kako se dizajn njegovog teksta mijenja, ovisno o tome koji se birači - djeteta ili kontekstual - koriste u pravilu CS-a.

Kćer se naziva elementom koji se nalazi direktno unutar roditelja. Prije nego što nastavite direktno na temu, dat ću sliku koja odražava hijerarhiju oznaka u HTML dokumentu na primjeru stavka čiji je tekst naveden i koji ćemo danas rastaviti:

Ovaj dizajn se naziva i stablo elemenata. Na ovoj ličnosti, spremnici za gniježđenje jasno su zastupljeni, što podrazumijeva hijerarhijske odnose između oznaka. Stavak P Oznaka je supsidijarni element u odnosu. Istovremeno, jaka oznaka nije podružnica za DIV, jer je utrka u P posudu.

Selektor podružnica CSS

Selektor djeteta u stablu elemenata uvijek je direktno unutar roditeljskog elementa, u ovom slučaju će biti sintaksa pisanja CSS selektora:

Stil će se primijeniti na selektor 2, ali samo ako je dijete za selektor 1. Mi ćemo detaljnije analizirati pomoću gore navedenog snimka zaslona sa drvetom elemenata. Na primjer, slijedeći sintaksu, možete postaviti ovo pravilo:

P\u003e em (boja: zelena;)

Ovo pravilo će utjecati na posljednju riječ odlomak "Italics", jer se zaključuje između otvaranja i zatvaranja em. EM oznaka je podružnica za P, jer se postavlja direktno unutar njega, stoga će tekst sadržaja, naime riječ "italic" biti oslikana u zelenoj boji.

Međutim, druga EM oznaka ne služi kao direktan potomak P oznake, jer je dio snažne oznake, kao rezultat toga dijela odlomka "Oznake oblikovanja em i jake" neće biti obojene.

Kontekstualni CSS selektor

To je red za smislu koji je kontekstualni selektor CSS-a. Prilikom postavljanja jedne ili druge stranice stranice vrlo često, oznake se ulažu u jedan na drugi. Da bi se stilovi za takve elemente ispravno radili, koriste se odabiri koji djeluju u nekom kontekstu, otuda i ime.

Ako se primijeni pravilo CSS-a, selektor djeteta mora biti smješten direktno unutar roditeljskog elementa (prvog nivoa gniježđenja), zatim za selektor konteksta potpuno je nevažan, a bilo koji nivo gniježđenja može se primijeniti bilo koji nivo gniježđenja, a sva stvar Jednaka svojstva elementa bit će prenesena sa roditelja. Istovremeno, sintaksa je:

Kao što vidite, kontekstualni selektor sastoji se od jednostavnih selektora odvojenih prostorom. Za kontekstualne selektore, dozvoljeno je koristiti dvije i više oznake uložene jedna u drugu. Sada napravimo CSS pravilo za ispitni odlomak, koji sam vodio iznad:

P em (boja: zelena;)

Kao što vidite, zeleno je obojen ne samo tekst sadržaja odlomaka, koji se direktno zaključuje u oznaci oblikovanja EM, odnosno riječ "Italics", ali i tekst teksta drugog em oznake, koji Takođe uključuje snažnu oznaku. Dogodilo se jer primjenjuje pravilo sa kontekstualnim selektorom, za koji nivo gniježđenja nije važan za razliku od podružnice. Ovo je glavna razlika između podružnice i kontekstualnog selektora.

Razmotrite još jedan primjer interakcije konteksta i dječijih selektora sa našim odlomkom. Upućivanje sljedećih CSS pravila za podružnice i selektor konteksta:

Div em (boja: crvena;) p\u003e em (boja: zelena;)

Nakon toga naš odlomak stječe takav dizajn:

Kao što vidite, komad teksta priloženi u EM i jakim oznakama obojen je crvenom bojom, jer je fer prema kontekstualnom odabiru pravila, odnosno EM oznaka zaključuje se u jakim i div kontejnerima i nivoom gniježđenja , kao što je već primijećeno, nije važno.

Postavlja se pitanje: zašto je riječ "Italic", što je ujedno i sadržaj EM, obojeni u zelenilu? Napokon, a za njega je kontekstualno odabiranje pravilo relevantno. Ali za ovaj dio teksta stava, kćeri selektor pravilo je takođe istina, jer nije u suprotnosti sa uslovom da za selektor dete, element treba direktno ući u oznaku P.

Činjenica je da CSS ima prioritetno zakon za CSS svojstva u nastavku. To je, u ovom slučaju, pravilo selektora kćeri nalazi se u dokumentu dolje od stilova CSS-a propisanih za kontekstni selektor Div kontejnera. Stoga je riječ "Italic" postala zelena. Ako ih promijenite na neka mjesta, pravilo "P\u003e EM (boja: zelena;)" prestaje djelovati i tekst teksta "Italics" bit će crveni.

Opis

Pseudo-Class: NTH-dijete koristi se za dodavanje stila za elemente na bazi stabla elemenata.

Sintaksa

element: nth-dijete (čudno | čak i |<число> | <выражение>) {...}

Vrijednosti

Neupadni svi neparni elementi brojevi. Čak i sva čak i brojevi elemenata. Broj niza broja dječijeg elementa u odnosu na njen roditelj. Numeriranje započinje s 1, bit će prvi element na popisu. Izraz je postavljen u obliku AN + B, gdje A i B cijeli brojevi i N - brojač koji automatski uzima vrijednost 0, 1, 2 ...

Ako je A IS nula, nije napisana i zapis se smanjuje na b. Ako je B nula, također nije naveden i izraz je napisan u obliku an. A i B mogu biti negativni brojevi, u ovom slučaju Plus znaka promjene u minusu, na primjer: 5n-1.

Zbog upotrebe negativnih vrijednosti A i B, neki rezultati mogu biti i negativni ili jednaki nuli. Međutim, samo pozitivne vrijednosti utječu na elemente zbog činjenice da numeriranje elemenata započinje s 1.

U kartici. 1 prikazuje neke moguće izraze i ključne riječi, a također su navedeni koji će brojevi elemenata biti uključen.

HTML5 CSS3 IE CR OP SA FX

	2134	2135	2136	2137	2138
Ulja	16	34	62	74	57
Zlato	4	69	72	56	47
Drvo	7	73	79	34	86
Kamenje	23	34	88	53	103

U ovom primjeru, Pseudo-Class: nth-dijete se koristi za promjenu stila prvog reda tablice, kao i isticanje boje svih čak i redova (Sl. 1).

Ažurirano: 21.01.2016

Posebna grupa pseudoklasa oblikuje pseudoklasice koji vam omogućavaju odabir određenih dječijih elemenata:

: prvo dijete: predstavlja element koji je prvi dečji element

: Last-dijete: predstavlja stavku koja je posljednji dječiji element

: Samo dete: predstavlja element koji je jedina podružnica u nekom spremniku

: Samo tipa: Odabir stavke koji je jedini element određene vrste (oznake) u nekom spremniku

: Nth-dijete (n): predstavlja dječji element koji ima specifičan n broj, na primjer, drugi dečji element

: Nth-last-dijete (n): predstavlja dječji element koji ima specifičan n broj, počevši od kraja

: Nth-of (n): bira određenu vrstu dječijeg elementa koji ima određeni broj

: Nth-posled-of-tip (n): bira dečji element određenog tipa koji ima određeni broj koji počinje od kraja

Pseudo klase prvo dijete

Koristimo Pseudoklass prvog djece da odaberete prve veze u blokovima:

Tablete

Pametni telefoni

Selektor stil A: First-dijete se odnosi na vezu ako je to prvi dječiji element bilo kojeg elementa.

A u drugom bloku prvi element je odlomak, tako da se stil ne odnosi na bilo koju vezu.

Pseudolass Last-dijete

Koristimo pseudolass posljednje dijete:

Pametni telefoni

Tablete

Selektor A: Last-dijete određuje stil za reference koje su posljednja kćer.

U prvom bloku, samo posljednja podružnica je veza. Ali u drugom posljednjem dečijem elementu, odlomak je, tako da u drugom bloku stil se ne odnosi na nijednu vezu.

Selektor samo djeteta

Selektor: Samo dijete bira elemente koji su jedini kćeri u kontejnerima:

Naslov

Odlomci sa tekstovima "Text1" i "Text4" jedini su dečji elementi u svojim vanjskim kontejnerima, tako da se na njih primenjuje na njih - Crveni font.

Pseudo klase samo tipa

Pseudo klase samo tipom odabire element koji je jedini element određene vrste u spremniku. Na primjer, jedini element div, sa elementima drugih vrsta u istom spremniku može biti toliko koliko želite.

Jedini odlomak i element vrpca

Iako je stil definiran za elemente div, neće se primijeniti, jer kontejner tijela sadrži dva DIV elementa, a ne jedan. Ali u tijelu postoji samo jedan element p, pa će dobiti stiliziranje. A također u kontejneru P, postoji samo jedan raspon element, tako da će biti stiliziran i.

Klasa pseudo nth-dete

Klasa NTH-CACIJE Pseudo omogućava vam stiliziranje svake sekunde, trećeg elementa, samo čak i samo neparne stavke itd.

Na primjer, stilizirajte ravnomjerne i neparne linije:

Pametni telefoni

Samsung	Galaxy S7 ivica	60000
Apple.	iPhone se	39000
Microsoft.	Lumia 650.	13500
Alcatel.	Idol S4.	30000
Huawei.	P9	60000
HTC	HTC 10.	50000
Meizu.	Pro 6.	40000
Xiaomi.	MI5.	35000

Da biste odredili stil za neparne stavke, selektor se prenosi na "neparno":

TR: nth-dijete (neparno) ()

Za oblikovanje čak i elemenata u selektoru, vrijednost "čak" se prenosi:

TR: NTH-dijete (čak) ()

Također u ovom selektoru možemo prenijeti broj stiliziranog elementa:

TR: nth-dijete (3) (boja pozadine: #bbb;)

U ovom slučaju, treći redak je stiliziran.

Druga prilika je upotreba zamjene za broj koji se izražava slovom N:

TR: nth-dijete (2n + 1) (boja pozadine: #bbb;)

Ovdje se stil primjenjuje na svaku drugu neparnu nizu.

Broj ispred n (u ovom slučaju 2) predstavlja dečiji element koji će biti dodijeljen na sljedeći način. Broj koji dolazi nakon što se prikazuje nakon što plus znak, iz kojeg elementa trebate pokrenuti odabir, odnosno +1 znači da trebate započeti od prvog dječijeg elementa.

Dakle, u ovom slučaju, izbor započinje s 1. elementom, a slijedi sljedeći, a sljedeće se objavljuje 2 * 1 + 1 \u003d 3. element, u daljnjem tekstu 2 * 2 + 1 \u003d 5. element i tako dalje.

Na primjer, ako želimo dodijeliti svaku treći element, počevši od drugog, mogli bismo napisati:

TR: nth-dijete (3n + 2) (pozadina boja: #bbb;)

Pseudo-Class: NTH-Last-dijete u suštini pružaju istu funkcionalnost, samo odbrojavanje elemenata nije od početka, već od kraja:

TR: NTH-Last-Child (2) (pozadina: #BBB; / * 2 Linija sa kraja, odnosno predsjedovani * /) TR: NTH-Last-dijete (2n + 1) (2n + 1) (2n + 1) : #eee; / * neparne linije, počevši od kraja * /)

Pseudo klasa NTH-tipa

Pseudo-Class: NTH-of-tipa omogućava vam odabir dječijeg elementa određenog tipa na određenom broju:

TR: NTH-TIP (2) (Boja pozadine: #bbb;)

Slično tome, NTH-Tyre-Type Pseudo klase radi, samo sada odbrojavanje elemenata dolazi od kraja:

TR: NTH-LAST-TIP (2N) (Boja pozadine: #bbb;)

Mislim da mnogi znaju kontekstualni selektori u CSS-u. Oni se najčešće koriste, međutim, iskusni snimatelji savršeno dobro znaju da ponekad kontekstualni selektori daju određene probleme. Ovaj problem je povezan sa činjenicom da u strukturi elementa može biti mnogo identičnih elemenata ugrađenih jedno u drugo. I potrebno je primijeniti stil ne za sve ugniježđene elemente, već samo direktno direktno. Ovdje za ovo i koristi se kćeri selektori u CSS-u.

Dakle, problem postaje razumljiviji, dajmo mali primjer. Dozvolite nam da imamo takve HTML kod:

A naš zadatak je samo crveno " Drugi odlomak"Ako pišemo pomoću selektora konteksta:

Kontejner P (
Boja: crvena;
}

Da ćemo postati crveni oba paragrafa koje uopće ne trebaju. Ovaj zadatak je vrlo jednostavno riješen kćeri selektori u CSS-u:

Kontejner\u003e P (
Boja: crvena;
}

Sve, sada smo postali samo crveni " Drugi odlomak". Budući da je ovaj odlomak direktno podružnica za .container. Ali " Prvi odlomak"Da li je podružnica za unutrašnju divDakle, pod djelovanjem selektora djeteta ne pada.

Taj se zadatak tako lako riješi, međutim, postoji jedan ogroman minus kćeri selektori u CSS-u - ne rade u preglednicima Internet Explorer.. Iz tog razloga njihova upotreba je izuzetno nepoželjna. Ali ako se iznenada negdje sretnete, sada ćete znati što ta vrsta selektora znači i šta radi.

Glavni zadatak ovog selektora slijedi iz njenog imena i sastoji se u pristupu dječijem elementu. Prikazuje se uz pomoć elementarnog znaka "\u003e", koji veže dječiji element roditeljskim elementom. Također je vrijedno napomenuti da se jednostavni selektori koriste u cirkulaciji. Kao primjer, razmotrite sljedeće kodiranje:

Element\u003e ul (jastučić- top: 20px;)

Ovo kodiranje znači da će se na popis primijeniti unutrašnji uvlačenje od 20 piksela iz gornje ivice koji se ulože u element. Prisutnost u ovoj ikoni za ulazak "\u003e" pokazuje da se pravilo odnosi samo na liste prvog nivoa gniježđenja.

Detaljna analiza rada radnika djeteta elementa

Selektor elementa djeteta ima slična svojstva sa konceptom selektora potomaka. Međutim, postoji karakteristična značajka koja prikazuje glavnu razliku između ovih operacija. Leži u činjenici da se učinak selektora potomka prostire na apsolutno sve elemente, dok selektor djeteta podređuje stilove položaja prvog nivoa klasifikacija.

Jasnije cijeni radu podružnog operatera pomoći će sljedećem primjeru:

Div\u003e R (boja: # FF0000; / * crvena * /)

< div> Ovaj niz će imati zadani crni tekst.< span> Ova linija prebacuje se crvenom bojom zbog činjenice da je p kćerka za divu. < p> Opet vidimo crnih slova.< span> Ovdje također vidimo crne likove, jer za ovaj raspon, roditelj je oznaka.

Ovaj primjer potvrđuje rad pomoćnog operatera prema stupnju gniježđenja.

Ograničenje za primjenu supsidijarnog operatera

Vrijedi napomenuti da je ova operacija podržana od strane svih preglednika osim legendarnog internetskog istraživača 6. Mislim da je malo ljudi koji koriste ovaj preglednik, ali ako su takve unikume dostupne, onda za njih postoji izlaz iz situacije biti opisani u zasebnom članku.

Zašto se primijeniti

Programeri se odnose na odabire dječijih elemenata u slučajevima kada trebate dodijeliti svoj jedinstveni stil s ugniježđenim elementima. Također, koristeći ovaj selektor može smanjiti glasnoću CSS-a, što će povećati čitljivost dokumenta. Kao što se pokazuje praksa, ova operacija se najčešće naziva prilikom stvaranja padajućih menija.

Selektor dječije elemente koristi se i za dodjeljivanje jedinstvenih stilova za elemente čiji su roditelji već poznati već. Drugim riječima:

Glavni\u003e zaglavlje ( / * Registracija se odnosi samo na glavni heter * / }

Ovaj je primjer fer u slučajevima kada se oznaka zaglavlja koristi za označavanje naslova članaka. U našem slučaju pitamo dizajner samo glavni prema sreću, a ne šteti sekundarnom. Ova tehnika također izbjegava upotrebu identifikatora proširenja, što zauzvrat olakšava težinu CSS datoteke i čini ga čitljivim.

Sažimanje

Stoga se pomoćni operater može primijeniti ne samo za dizajn padajućih menija, već i za malu optimizaciju vašeg internetskog resursa za rad pretraživanja robota.