Exemplul de mai jos nu va funcționa:

Paragraful și în el gras element și iată-l înclinat element.

Aici grasŞi a subliniat elemente, mai mult înclinat.

Un exemplu mai real

Să vedem cum funcționează selectorul adiacent folosind un exemplu mai realist. În articole mari care conțin mai multe secțiuni marcate cu etichete

, este recomandabil să măriți marginea superioară (proprietatea margin-top). O indentare de 30 px va face textul lizibil. Dar dacă eticheta

vine imediat după

, iar aceasta ar putea fi la începutul articolului, liniuța de sus deasupra etichetei

va fi redundant. Această problemă poate fi rezolvată folosind un selector de elemente adiacente.

Iată codul html cu un exemplu despre cum funcționează selectorul de elemente adiacente.

Buna ziua!

Titlul h2

Titlul h2

Textul paragrafului este despre aventuri incredibile.

Titlul h2

Textul paragrafului este despre aventuri incredibile.

Titlul h2

Textul paragrafului este despre aventuri incredibile.

De asemenea, folosind instrumentul de selectare adiacent, este convenabil să ajustați indentația dintre titlu și primul paragraf al secțiunii, în exemplul nostru acestea sunt etichete

Şi

De asemenea, este de remarcat faptul că pentru a reduce indentările este convenabil să folosiți valori negative.

Buna ziua!

Titlul h2

Textul paragrafului este despre aventuri incredibile.

Titlul h2

Textul paragrafului este despre aventuri incredibile.

Titlul h2

Textul paragrafului este despre aventuri incredibile.

Titlul h2

Textul paragrafului este despre aventuri incredibile.

Acum un exemplu despre cum să utilizați un selector adiacent pentru a selecta toate elementele listei, cu excepția primului.

• Elementul din listă #1.
• Elementul din listă #2.
• Lista articolului #3.
• Elementul din listă #4.

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

Figura 1. Exemplul nr. 5 la locul de muncă.

1 iunie 2015

În schimb, cele vecine sunt folosite mai rar. Principala diferență este că trebuie să-l urmeze pe celălalt. Pentru a-ți fi mai ușor de înțeles acest subiect, propun să analizăm această structură:

<тег1> <тег2> <тег3> <тег4> <тег5><тег6>...

După cum probabil ați ghicit din lecția anterioară, etichetele 2, 3, 4, 5, 6 sunt selectoare de context pentru eticheta1. La rândul lor, selectorii vecini vor fi: tag2 și tag3, tag4 și tag5, dar în același timp eticheta2Şi eticheta4 nu sunt adiacente. Proprietățile stilului vor fi aplicate ultimului element pe care îl specificați ca adiacent. Trebuie doar să urmați ordinea selectoarelor. Sintaxa generală de scriere este:

Selector1 + selector2+ ...+selectorN ( proprietatea1: valoare; proprietatea2: valoare; ... proprietateaN: valoare)

Să ne uităm la acest exemplu:

Titlu

Etichetă p este un selector adiacent etichetei h1

Acest text ar trebui să fie verde

Învecinat selectoare CSS

Selectoarele CSS vecine, sau selectoarele de frați, așa cum sunt denumite, vă permit să aplicați stiluri unui element în cazurile în care acesta apare înaintea unui anumit element în codul HTML, adică elementele în acest caz trebuie să fie la același nivel de imbricare. . Selectoarele învecinate sunt, de asemenea, compozite și sunt formate din selectoare simple (clase, identificatori etc.).

Pentru a înțelege clar ce sunt elementele adiacente, să ne uităm din nou la un exemplu familiar, doar ușor modificat.

<тег1> <тег2>... <тег3><тег4>... <тег5><тег6>...

În acest exemplu există doar două perechi de elemente adiacente - acestea sunt<тег2>Şi<тег3>, și de asemenea<тег3>Şi<тег5>, Toate. Adică<тег2>Şi<тег5>nu mai sunt vecini unul in raport cu altul, deoarece intre ei exista<тег3> .

Selectoarele adiacente sunt formate din doi sau mai mulți selectori obișnuiți despărțiți de un semn „+” (plus), unde primul element din cod este indicat mai întâi, apoi cel care vine după el, apoi cel care vine imediat după al doilea. , și așa mai departe. Ca de obicei, stilurile sunt aplicate elementului al cărui selector este ultimul din listă. Sintaxă generală.

selector1 + selector2 ( proprietate: valoare; proprietate: valoare; ...)

Spațiile de pe ambele părți ale semnului „+” pot fi plasate sau nu, după dorință.

Un exemplu de utilizare a selectoarelor adiacente în CSS

Titlu

Text. Puternic. Text. Em.

Text. Em. Text. Puternic.

Text. Em. Text. Puternic.

Rezultat în browser

Titlu

Text. Puternic. Text. Em.

Text. Em.

Text. Em.

Text. Puternic. În acest exemplu, doar primul paragraf cu text roșu și doar al doilea paragraf sunt subliniate deoarece niciun alt element nu se potrivește cu regulile de stil. În special, conținutul elementului în acest caz nu va fi verde, deoarece este separat de titlu nu de unul, ci de două paragrafe. Apropo, după cum puteți vedea, în cel de-al doilea stil au fost specificate deodată selectoarele adiacente și pentru copii. Așa că am decis să vă reamintesc încă o dată că selectorii diferite tipuri

pot fi combinate liber.

Internet Explorer 6.0 nu înțelege selectoarele adiacente (sau selectoarele secundare). Amintește-ți asta.

1. Teme pentru acasă.
2. Creați un aspect obișnuit cu două coloane cu un meniu pe pagină. Lăsați elementele din lista de meniu să aibă marcatori de imagine.