Css selectorii sau selectorii vecini ai unui element adiacent

Selectorul unui element vecin selectează un element situat în codul de document direct după un alt element specificat. Să luăm ca exemplu o bucată de cod html.

Iată trei etichete:

. și . tag-uri și sunt închise într-un container

. ei sunt copiii ei. Dar, în relație unul cu celălalt, sunt învecinate.

Sintaxa selectorului adiacent: selectorul elementului anterior, semnul "+" și selectorul elementului selectat din spatele acestuia. Să lucrăm cu următorul selector:

În exemplu, se observă că selectorul elementului vecin a lucrat în primul paragraf. Aici etichete și mergeți unul după altul. Și în al doilea paragraf între ei a folosit eticheta . Acum, există două perechi de etichete învecinate: + și + .

Eroarea în acest caz este eticheta în vecinătatea etichetei

. Etichetă de aici este un copil al etichetei

. iar el, la rândul său, este părintele .

Exemplul de mai jos nu funcționează:

Un exemplu mai realist

Aici este codul html cu un exemplu de lucrare a selectorului elementului învecinat.

De asemenea, utilizând instrumentul selectorului adiacent, este convenabil să ajustați indentul dintre titlu și primul paragraf al secțiunii, în exemplul nostru acestea sunt etichete

și

.

Este, de asemenea, de remarcat faptul că este convenabil să se utilizeze valori negative pentru a reduce indentarea.

Acum, un exemplu de cum, cu ajutorul selectorului adiacent, selectați toate elementele din listă, cu excepția primului.

Iată ce se întâmplă ca urmare a acestui exemplu:

Css selectorii sau selectorii vecini ai unui element adiacent
Figura 1. Lucrarea din exemplul nr. 5.

Articole similare