Bună ziua, dragi cititori! Continuarea selectoarelor CSS pe care vreau să le ofer descrierea filialelor și a selectoarelor contextuale, precum și analiza lor comparativă, deoarece, conform logicii cererii, ele sunt foarte asemănătoare, deși au o anumită diferență.

În publicațiile mele, am rămas în detaliu în diferite tipuri de selectori CSS:; precum și . Apropo, în ultimul articol, în cazul în care diferite tipuri de selector de atribute dezasamblate, am descris în detaliu modul în care calculele mele teoretice pot fi verificate imediat prin modificarea codului HTML și CSS online utilizând Google Chrome () instrument. Astfel de instrumente de editare au cele mai recente modificări ale tuturor browserelor populare, inclusiv Plugin Firebug pentru Firefox ().

Materialul teoretic al acestui post poate fi, de asemenea, studiat prin editarea oricărei pagini a oricărui site! Pentru a face acest lucru, pur și simplu apăsați F12 dacă utilizați Google Chrome sau Mozilla Firefox (). Și acum voi prezenta conținutul etichetei P, pe exemplul pe care îl vom studia selectare și selectoare CSS contextuale:

Acest paragraf include eM și etichete de formatare puternicăcare alocă text gras și cursiv.

Folosind instrumentul de editare descris mai sus, am introdus acest paragraf direct la acest articol, marcând textul corespunzător din partea stângă a ferestrei pentru a edita, ca rezultat al textului acestui paragraf a apărut în partea de sus a paginii:

Acest design HTML ,. Acest paragraf va fi experimental în publicația de astăzi, în exemplul său, va arăta cum se schimbă designul textului său, în funcție de selectorii - copilul sau contextual - sunt utilizate în regula CSS.

Fiica este numită un element care se află direct în interiorul părintelui. Înainte de a continua direct la subiect, voi da o imagine care să reflecte ierarhia etichetei din documentul HTML cu privire la exemplul al cărei text este dat mai sus și pe care îl vom dezasambla astăzi:

Acest design este numit și arborele elementelor. În această figură, containerele de cuibărit sunt clar reprezentate, ceea ce implică relații ierarhice între etichete. Tag-ul PATER P este un element subsidiar în raport. În același timp, eticheta puternică nu este o filială pentru DIV, deoarece este cursă în recipientul P.

Selectorul CSS subsidiar

Selectorul pentru copii din arborele elementelor este întotdeauna direct în interiorul elementului părinte, în acest caz sintaxa de scriere a selectorului CSS va fi după cum urmează:

Stilul va fi aplicat la selector 2, dar numai dacă este un copil pentru selector 1. Vom analiza mai detaliat utilizând ecranul de mai sus cu arborele elementelor. De exemplu, după sintaxa, puteți seta această regulă:

P\u003e em (culoare: verde;

Această regulă va influența ultimul paragraf de cuvânt "italic", deoarece este încheiat între etichetele de deschidere și închidere ale em. Eticheta EM este o filială pentru P, deoarece este plasată direct în interiorul acesteia, prin urmare textul conținutului, și anume cuvântul "italic" va fi vopsit în verde.

Cu toate acestea, celălalt etichetă EM nu servește drept descendent direct al etichetei P, deoarece face parte din eticheta puternică, ca urmare a cărora partea din paragraful "Formatarea etichetelor em și puternice" nu va fi vopsită.

Selector CSS contextual

Este o coadă de a da seama care este selectorul CSS contextual. Când vă așezați foarte des una sau altă pagină a site-ului, etichetele sunt investite într-una la alta. Pentru ca stilurile pentru astfel de elemente să funcționeze corect, se utilizează selectoare, care acționează într-un anumit context, prin urmare numele.

Dacă pentru ca regula CSS să fie aplicată, selectorul pentru copii trebuie să fie localizat direct în interiorul elementului părinte (primul nivel de cuibărit), apoi pentru selectorul de context este complet neimportant și poate fi aplicat orice nivel de cuibărit, toate Proprietățile egale ale elementului vor fi transferate de la părinte. În același timp, sintaxa este:

După cum puteți vedea, selectorul contextual constă din selectori simpli separați de un spațiu. Pentru selectoarele contextuale, este permisă utilizarea a două și mai multe etichete investit unul în celălalt. Acum facem o regulă CSS pentru punctul de testare, pe care l-am condus mai sus:

P em (culoare: verde;)

După cum puteți vedea, Green este colorat nu numai textul conținutului paragrafului, care este încheiat direct în eticheta de formatare a em, adică cuvântul "italic", dar și textul textului unui alt etichetă EM, care include, de asemenea, eticheta puternică. Sa întâmplat deoarece aplică regula cu selectorul contextual, pentru care nivelul de cuibărit nu este important în contrast cu filiala. Aceasta este diferența principală dintre subsidiari și selectorul contextual.

Luați în considerare un alt exemplu de interacțiune a selectorilor de context și copii cu paragraful nostru. Propriarea următoarelor reguli CSS pentru selectorul subsidiar și context:

Div em (culoare: roșu;) p\u003e em (culoare: verde;)

După aceasta, paragraful nostru dobândește un astfel de design:

După cum puteți vedea, o bucată de text închisă în etichetele EM și puternice sunt pictate în roșu, deoarece este corect față de regula selectorului contextual, adică eticheta EM este încheiată în containerele puternice și div și nivelul de cuibărit , așa cum sa observat deja, nu contează.

Întrebarea apare: de ce este cuvântul "italic", care este și conținutul em, pictat în verde? La urma urmei, și pentru el, regula selectorului contextual este relevantă. Dar pentru această secțiune a textului paragrafului, regula selectorului fiicei este, de asemenea, adevărată, deoarece nu contrazice condiția ca pentru selectorul de copii, elementul ar trebui să intre direct la eticheta P.

Faptul este că CSS are o lege prioritară pentru proprietățile CSS de mai jos. Aceasta este, în acest caz, regula selectorului fiicei se află în documentul de mai jos decât stilurile CSS prescrise pentru selectorul context al containerului DIV. Prin urmare, cuvântul "italic" a devenit verde. Dacă le schimbați în unele locuri, regula "P\u003e em (culoare: verde;)" încetează să acționeze și textul textului "italic" va fi roșu.

Descriere

Pseudo-Class: copilul NTH este folosit pentru a adăuga stilul la elementele bazate pe arborele elementelor.

Sintaxă

element: copilul NTH (ciudat | chiar |<число> | <выражение>) {...}

Valori

Numerele de elemente ciudate. Chiar și toate numerele de elemente. Numărul numărului de secvență al elementului copil în raport cu părintele sale. Numerotarea începe cu 1, va fi primul element din listă. Expresia este setată sub forma unui + B, în cazul în care întregragerile A și B și N - contorul care necesită automat valoarea 0, 1, 2 ...

Dacă A este zero, nu este scris și înregistrarea este redusă la b. Dacă B este zero, nu este de asemenea specificat și expresia este scrisă sub forma unui. A și B pot fi numere negative, în acest caz, semnul plus modificările la minus, de exemplu: 5N-1.

Datorită utilizării valorilor negative A și B, unele rezultate pot fi, de asemenea, negative sau egale cu zero. Cu toate acestea, numai valorile pozitive afectează elementele datorate faptului că numerotarea elementelor începe cu 1.

În fila. 1 prezintă câteva expresii posibile și cuvinte cheie și, de asemenea, specificate numerele elementelor vor fi implicate.

HTML5 CSS3 adică CR OP SA FX

	2134	2135	2136	2137	2138
Ulei	16	34	62	74	57
Aur	4	69	72	56	47
Lemn	7	73	79	34	86
Pietrele	23	34	88	53	103

În acest exemplu, Pseudo-Class: copilul NTH este folosit pentru a schimba stilul primului rând al mesei, precum și pentru a evidenția culoarea tuturor rândurilor (fig.1).

Ultima actualizare: 04/21/2016

Un grup special de pseudoclass formează pseudoclass care vă permit să alegeți anumite elemente copil:

: Primul copil: reprezintă un element care este primul element copil

: Ultimul copil: reprezintă un element care este ultimul element copil

: Numai copilul: reprezintă un element care este singura filială în unele recipiente

: Numai de tip: Selectează un element care este singurul element al unui anumit tip (etichetă) în unele recipiente

: NTH-COPIL (N): reprezintă un element copil care are un număr n specific, de exemplu, al doilea element copil

: Nth-ultima-copil (n): prezintă un element copil care are un număr specific n, începând de la sfârșit

: Nth-of-Type (N): Selectează un anumit tip de element copil care are un număr specific

: Nth-ultima de tip (n): selectează un element copil al unui anumit tip care are un număr specific pornind de la sfârșit

Pseudo clasa primul copil

Folosim primul copil Pseudoclass pentru a selecta primele link-uri din blocuri:

Tablete

Smartphone-uri

Stilul de selector A: Primul copil se aplică linkului dacă acesta este primul element copil al oricărui element.

Și în al doilea bloc, primul element este un paragraf, astfel încât stilul nu se aplică nici unei legături.

Pseudolass ultimul copil

Folosim ultimul copil Pseudolass:

Smartphone-uri

Tablete

Selectorul A: Ultimul copil determină stilul pentru referințele care sunt ultimele elemente fiice.

În primul bloc, ultima filială este o legătură. Dar, în al doilea element de copil, paragraful este, astfel încât în \u200b\u200bal doilea bloc stilul nu se aplică niciuneia dintre legături.

Numai selectorul pentru copii

Selector: Numai-copil selectează elemente care sunt singurele elemente fiice din containere:

Titlu

Paragrafele cu texte "Text1" și "Text4" sunt singurele elemente ale copilului în recipientele lor externe, astfel încât stilul este aplicat - font roșu.

Pseudo-clasa numai de tip

Numai de tip pseudo-clasa selectează un element care este singurul element al unui anumit tip în recipient. De exemplu, singurul element DIV, cu elementele altor tipuri în același container, poate fi la fel de mult cum vă place.

Unic paragraf și element spun

Deși stilul este definit pentru elementele DIV, acesta nu va fi aplicat, deoarece recipientul corpului conține două elemente DIV și nu una. Dar în corp există doar un element P, deci va primi o stilizare. Și, de asemenea, în recipient p există doar un singur element de vedere, deci va fi, de asemenea, stilizat.

Clasa Pseudo a lui Nth-copil

Clasa Pseudo Nth-Child Pseudo vă permite să stilizați fiecare secundă, al treilea element, chiar și numai elemente ciudate etc.

De exemplu, liniile de masă de stilizare chiar și ciudate:

Smartphone-uri

Samsung	Galaxy S7 Edge.	60000
Măr.	iPhone SE.	39000
Microsoft.	Lumia 650.	13500
Alcatel.	Idol S4.	30000
Huawei.	P9.	60000
HTC.	HTC 10.	50000
Meiizu.	Pro 6.	40000
Xiaomi.	MI5.	35000

Pentru a determina stilul pentru elemente ciudate, selectorul este transmis la "Impar":

TR: NTH-COPIL (ODS) ()

La styling elemente chiar în selector, valoarea "chiar" este transmisă:

TR: copilul (chiar) () ()

De asemenea, în acest selector putem transfera numărul elementului stilizat:

TR: Nth-copil (3) (fundal-culoare: #bbb;)

În acest caz, a treia linie este stilizată.

O altă oportunitate este utilizarea unui înlocuitor al unui număr, care este exprimat prin litera N:

TR: copilul Nth (2n + 1) (fundal-culoare: #bbb;)

Aici stilul este aplicat fiecărui al doilea șir ciudat.

Numărul din fața N (în acest caz 2) reprezintă elementul copil care va fi alocat după cum urmează. Numărul care vine după semnul Plus este afișat, din care element trebuie să porniți selecția, adică +1 înseamnă că trebuie să începeți de la primul element copil.

Astfel, în acest caz, selecția începe cu elementul 1 și următorul este eliberat 2 * 1 + 1 \u003d element 3, denumit în continuare 2 * 2 + 1 \u003d al 5-lea element și așa mai departe.

De exemplu, dacă vrem să alocăm fiecare al treilea element, începând de la al doilea, am putea scrie:

TR: copilul nth (3n + 2) (fundal-culoare: #bbb;)

Pseudo-Class: NTH-ultima-copil oferă, în esență, aceeași funcționalitate, numai numărătoarea inversă a elementelor nu este de la început, ci de la sfârșit:

TR: NTH-Ultimul copil (2) (culoarea fundalului: #bbb; / * 2 linia de la capăt, adică penultima * /) tr: NTH-ultima-copil (2N + 1) (fundal-culoare : #Eee; / * linii ciudate, începând de la sfârșit * /)

Nth-of-Type Pseudo Class

Pseudo-Class: Nth-of-Type vă permite să selectați un element copil de un anumit tip la un număr specific:

TR: nth-of-de-tip (2) (fundal-culoare: #bbb;)

În mod similar, clasa Pseudo-of-of-of-of-of-of-of-of-of-of-off, numai acum numărătoarea inversă a elementelor vine de la sfârșit:

TR: NTH-ultima de tip (2N) (fundal-culoare: #bbb;)

Cred că mulți știu despre selectori contextuali în CSS. Acestea sunt folosite cel mai adesea, cu toate acestea, cameramanii experimentați știu perfect că, uneori, selectorii contextuali fac anumite probleme. Această problemă este legată de faptul că în structura elementului pot exista multe elemente identice încorporate unul în celălalt. Și este necesar să se aplice stilul nu pentru toate elementele imbricate, ci numai la elementul direct direct. Aici pentru asta și folosit selectoarele fiice în CSS.

Astfel încât problema devine mai ușor de înțeles, să dăm un mic exemplu. Să avem așa ceva Codul HTML.:

Și sarcina noastră este să fac doar roșu " Al doilea paragraf"Dacă scriem folosind selectorul de context:

Container P (
Culoarea rosie;
}

Că vom deveni roșu ambele paragrafe pe care nu le avem nevoie deloc. Această sarcină este foarte simplă rezolvată de selectoarele fiice în CSS:

Container\u003e P (
Culoarea rosie;
}

Totul, acum am devenit numai roșu " Al doilea paragraf"Deoarece acest paragraf este direct subsidiară pentru .container.. DAR " Primul paragraf"Este o filială pentru internă divAstfel, sub acțiunea selectorului de copii, nu se încadrează.

Această sarcină este atât de ușor rezolvată, totuși, există un minus imens selectoarele fiice în CSS - Nu lucrează în browsere Internet Explorer.. Din acest motiv, utilizarea lor este extrem de nedorită. Dar dacă vă întâlniți brusc undeva, acum veți ști ce înseamnă acest tip de selector și ceea ce face.

Sarcina principală a acestui selector rezultă din numele său și constă în accesarea elementului copil. Afișează cu ajutorul unui semn elementar "\u003e", care leagă un element copil cu un element părinte. De asemenea, merită observat că selectorii simpli sunt utilizați în circulație. De exemplu, luați în considerare următoarele codare:

Element\u003e UL (padding-top: 20px;)

Această codificare înseamnă că o liniuță internă de 20 pixeli de la marginea superioară va fi aplicată pe lista care este investită în element. Prezența în această pictogramă de intrare "\u003e" arată că regula se aplică numai listelor primului nivel de cuibărit.

Analiza detaliată a selectorului de lucru al elementului copil

Selectorul elementului copilului are proprietăți similare cu conceptul selectorului descendent. Cu toate acestea, există o caracteristică caracteristică care arată diferența principală dintre aceste operații. Acesta constă în faptul că efectul selectorului descendent se extinde la absolut toate elementele, în timp ce selectorul copilului subordonează stilurile poziției primului nivel de clasificări.

O aprecie mai clar că activitatea operatorului subsidiar va contribui la următorul exemplu:

DIV\u003e R (Culoare: # FF0000; / * roșu * /)

< div> Acest șir va avea un text negru implicit.< span> Această linie este reproiectată în roșu datorită faptului că P este o etichetă fiică pentru Diva. < p> Din nou, vedem scrisori negre.< span> Aici vedem, de asemenea, caractere negre, deoarece pentru această perioadă, părintele este etichetă.

Acest exemplu confirmă activitatea operatorului subsidiar în funcție de gradul de cuibărit.

Restricție pentru aplicarea unui operator subsidiar

Este demn de remarcat faptul că această operațiune este susținută de toate browserele, altele decât legendarul Internet Explorer 6. Cred că există puțini oameni care utilizează acest browser, dar dacă astfel de UNCUME sunt disponibile, atunci pentru ei există o cale de ieșire din situația care va să fie descris într-un articol separat.

De ce se aplică

Programatorii se referă la selectorii elementelor copilului în cazurile în care trebuie să vă atribuiți stilul unic cu elemente imbricate. De asemenea, utilizarea acestui selector poate reduce volumul CSS, care va crește lizibilitatea documentului. După cum arată practica, această operațiune este cel mai adesea menționată la crearea de meniuri derulante.

Un selector de elemente pentru copii este, de asemenea, utilizat pentru a atribui stiluri unice elementelor ale căror părinți sunt deja cunoscuți anterior. Cu alte cuvinte:

Main\u003e antet ( / * Înregistrarea se aplică numai la principalul heter * / }

Acest exemplu este corect în cazurile în care eticheta antetului este utilizată pentru a evidenția titlurile articolelor. În cazul nostru, cerem designului doar principalul heter și nu răniți secundarul. Această tehnică evită, de asemenea, utilizarea identificatorilor de extensie, care, la rândul său facilitează greutatea fișierului CSS și îl face mai ușor de citit.

Rezumând

Astfel, operatorul subsidiar poate fi aplicat nu numai pentru proiectarea meniurilor derulante, ci și pentru o mică optimizare a resurselor dvs. de internet pentru a lucra roboții de căutare.