Css - selectori de relații, este șeful

În această lecție vom fi familiarizați cu selectorii de relații care sunt utilizați pentru a selecta elemente în funcție de modul în care sunt legate de alte elemente de pe pagina web.

Tipuri de relații între elemente

Fiecare element dintr-o pagină web poate fi asociat unui alt element utilizând una dintre următoarele relații:

un element părinte, un strămoș direct este un element care conține unul sau mai multe elemente închise în el. În ceea ce privește elementele cuprinse în el, el este părintele lor;
copil, descendent direct, copil, copil este un element care este imbricat în elementul părinte și relativ la acesta este un element copil, adică copilul său;
un element învecinat, un frate (sora sau frate) sunt elemente cu un părinte comun. Asemenea elemente în raport unul cu celălalt sunt frații (vecini).

Luați în considerare următorul exemplu:

Acest cod poate fi reprezentat ca următoarea schemă:

În exemplul de mai sus, selectăm elementul p și analizăm modul în care este legat de alte elemente din cod:

Elementul parent este div;
Elementul adiacent este h1;
Descendenți direcți, copii - elemente puternice. em.

Element1 Element2

În acest selector, elementul 1 și elementul 2 sunt legate de o relație "copil strămoș". Ie este utilizat pentru a selecta elementele2. care sunt situate în interiorul elementului1 din documentul HTML. Cu alte cuvinte, el alege toate elementele2. care sunt descendenți ai elementului.

De exemplu, selectați și setați stilul pentru fiecare element din p. care este un copil al elementului div:

Element1> Element2

În acest selector, element1 și element2 sunt legate de relația părinte-copil. Ie este utilizat pentru a selecta elementele2. care sunt copiii elementului. Cu alte cuvinte, el alege toate elementele2. care au un element ca părinte imediat.

De exemplu, selectați și setați stilul pentru fiecare element din p. al cărui părinte este un element div:

Element1 + Element2

Selector Element1 + Element2 este folosit pentru a selecta items2. care sunt localizate imediat după element1. și sunt vecini unii cu alții. Cu alte cuvinte, acest selector este utilizat pentru a selecta un element2. care este localizat imediat după elementul1. și trebuie să aibă același părinte în documentul HTML.

De exemplu, selectați și setați stilul pentru fiecare element din p. care este localizat imediat după elementul div. Și alegeți numai acele elemente p. care sunt la același nivel de cuibărire ca și elementele div. și anume ei ar trebui să fie vecini unul față de celălalt:

Element2 este destinat pentru selectarea elementelor2. care sunt situate după element1. și sunt vecini unii cu alții. Cu alte cuvinte, acest selector este utilizat pentru a selecta elementele 2. care sunt situate după element1. și trebuie să aibă același părinte în documentul HTML.

De exemplu, selectați și setați stilul pentru fiecare element din p. care este localizat după elementul div. Și alegeți numai acele elemente p. care sunt la același nivel de cuibărire ca și elementele div. și anume ei ar trebui să fie vecini unul față de celălalt:

Articole similare

Pagina anterioară