Nu va mai fi prima etichetă copil. În acest caz, primul element copil va fi h2.
Același lucru se întâmplă cu regula p:last-child - stilul CSS va fi aplicat etichetei
Orice altă etichetă de alt tip și veți vedea că regula p:last-child nu se va mai aplica.
(aceasta este indicată de numărul 3 dintre paranteze). Culoarea fontului pentru acest paragraf devine roșu. Puteți schimba numărul 3 (de exemplu, cu 2) și puteți vedea rezultatul.
Regulile tr:nth-child(impar) și tr:nth-child(par) funcționează pentru elementele pare și, respectiv, tr. Puteți vedea rezultatul în captură de ecran și, de asemenea, copiați tot codul și experimentați singuri stilurile.
/* CSS */ p:first-of-type (culoare: violet; text-transform: majuscule; ) p:last-of-type (font-style: italic; font-size: 0.8em; ) p:nth- de tip (3) ( culoare: roșu; ) p:nth-of-type (impar) ( culoare de fundal: #A2DED0; ) p:nth-of-type (par) ( culoare de fundal: #C8F7C5; ) h3:numai-de-tip (decor text: subliniat; )
Captură de ecran: aplicarea :first-of-type, :last-of-type, :nth-of-type și :only-of-type
Prima regulă CSS pe care o vedeți este p:first-of-type . Ce face? Selectează un element copil de tip p care primul găsite la părinte. Și nu contează locul în care se află această etichetă printre elementele de alte tipuri - primul, al doilea sau al zecelea. Aceasta este diferența dintre pseudo-clasele:first-child și:first-of-type.
Următoarea regulă - p:nth-of-type(3) - schimbă culoarea fontului în roșu. Acest stil este aplicat etichetei
. Dar dacă nu luăm în considerare elemente de alte tipuri, se dovedește că eticheta
Cu font roșu se află pe locul trei (printre etichetele de tipul său). Așa funcționează această regulă.
Regulile p:nth-of-type (par) și p:nth-of-type (impar) funcționează în mod similar: deoarece numele p este dat înainte de două puncte, copiii par și impar de tip p sunt selectați și pictați în culorile date. Elementele rămase sunt sărite.
Ultima regulă - h3:only-of-type - se aplică conținutului etichetei
, făcând textul subliniat. Acest stil funcționează doar datorită etichetei este singurul element copil de tipul său. Dacă adăugați o altă etichetă la codul HTML , stilul nu va fi aplicat.
concluzii
Selectorul de copii CSS vă permite să schimbați stilul unui element copil al unui document HTML în funcție de cine este părintele acestuia.
Folosind pseudoclase suplimentare: first-child, :last-child, :nth-child, :only-child, puteți stila elementele copil ale unui document HTML, concentrându-vă pe locația și numerotarea acestora în arborele de elemente.
Pseudo-clase: first-of-type, :last-of-type, :nth-of-type, :only-of-type vă permit să aplicați stil elementelor copil ale unui document HTML, în funcție de tipul lor, de asemenea ca numerotare în arborele de elemente .
Elementele copil sunt elemente care sunt situate direct în interiorul unui element părinte. Observați cuvintele: direct înăuntru.
Să ne uităm la un exemplu de cod html simplu:
Elemente copil.
Paragraful și în el gras element și iată-l înclinat element.
Aici grasȘi subliniat și oblic elemente.
Acest cod are două paragrafe. Există elemente inline în interiorul paragrafelor
, Și . În al doilea paragraf eticheta imbricat într-o etichetă
.
Acum haideți să adăugăm stiluri CSS la acest cod html folosind selectoare de copii.
Sintaxa pentru selectoarele de copii:
Selector 1 > Selector 2 (Proprietate: valoare; )
Iată codul actualizat:
Elemente copil.
Paragraful și în el gras element și iată-l înclinat element.
Aici grasȘi subliniat și oblic elemente.
Deci, să ne amintim: un element copil este un element imbricat direct în părinte. Adică, un element copil este un descendent de primul nivel. Să fim atenți la etichetă , în primul paragraf este imbricat într-o etichetă
Și în al doilea este imbricat într-o etichetă , deși este și un copil al etichetei
Prin urmare, în al doilea paragraf, regula CSS pentru selectorul de copii p>i ( culoare : albastru ; ) nu va funcționa - textul italic al celui de-al doilea paragraf nu va fi afișat în albastru.
Figura 1. Exemplul #1 la locul de muncă.
Accesați elementul html al doilea paragraf poate fi folosit folosind regula CSS: p>u>i ( culoare : albastru ; ).
Să folosim această regulă pentru a seta galben textul italic al celui de-al doilea paragraf.
Elemente copil.
Paragraful și în el gras element și iată-l înclinat element.
Aici grasȘi subliniat și oblic elemente.
Acest stil va funcționa și textul italic din al doilea paragraf va fi afișat cu galben.
Figura 2. Exemplul nr. 2 în acțiune.
Exemplu mai complex
Avem cod html:
Elemente copil.
Implicit este interpretat astfel:
Provocare: folosind CSS, transformați această listă într-un meniu orizontal.
Figura 3. Scopul schimbării.
Iată o soluție la această problemă folosind selectoare de copii:
Elemente copil.
Pentru o mai bună înțelegere a acestui exemplu, citiți mai departe.
Vlad Merjevici
Un element copil este un element care se află direct în interiorul unui element părinte. Pentru a înțelege mai bine relațiile dintre elementele documentului, să ne uităm la un mic cod (exemplul 12.1).
Exemplul 12.1. Imbricarea elementelor într-un document
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
În acest exemplu, sunt utilizate mai multe containere, care sunt amplasate unul în celălalt în cod. Acest lucru poate fi văzut mai clar în arborele elementelor, care este denumirea dată structurii relațiilor dintre etichetele documentelor (Fig. 12.1).
Orez. 12.1. Exemplu de arbore de elemente
În fig. Figura 12.1 prezintă imbricarea elementelor și ierarhia acestora într-o formă convenabilă. Aici elementul copil al etichetei
eticheta proeminentă
Cu toate acestea, eticheta nu este un copil al etichetei , deoarece se află într-un container
Să revenim acum la selectoare. Un selector copil este unul care se află direct în interiorul elementului părinte din arborele de elemente. Sintaxa pentru utilizarea unor astfel de selectoare este următoarea.
Selector 1 > Selector 2 (Descrierea regulilor de stil)
Stilul este aplicat Selectorului 2, dar numai dacă este un copil al Selectorului 1.
Referindu-ne la Exemplul 12.1, stilul de vizualizare P > EM (culoare: roșu) ar fi setat la primul paragraf al documentului, deoarece eticheta se află în interiorul recipientului Și nu va da niciun rezultat pentru al doilea paragraf. Și totul pentru că eticheta în al doilea paragraf se află într-un container , prin urmare condiția de cuibărit este încălcată.
În logica lor, selectoarele de copii sunt similare cu selectoarele de context. Diferența dintre ele este următoarea. Un selector de copii este stilat numai dacă este un copil direct, adică direct în interiorul elementului părinte. Pentru un selector de context, este permis orice nivel de imbricare. Pentru a clarifica despre ce vorbim, să ne uităm la următorul cod (exemplul 12.2).
Exemplul 12.2. Selectoare contextuale și pentru copii
HTML5 CSS 2.1 IE Cr Op Sa Fx
Selectoare pentru copii
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna Aliguam erat volutpat.
Rezultatul acestui exemplu este prezentat în Fig. 12.2.
Orez. 12.2. Culoarea textului setată folosind un selector de copii
A eticheta În exemplu, două reguli funcționează simultan: selector de context (tag situat în interior ) și selector de copii (tag
este o filială a ). În acest caz, regulile sunt echivalente, deoarece toate condițiile pentru ele sunt îndeplinite și nu se contrazic. În astfel de cazuri, se aplică stilul prezentat în codul de mai jos, astfel încât textul italic apare cu roșu. Dacă inversați regulile și puneți DIV I mai jos, culoarea textului se va schimba de la roșu la verde.
Rețineți că, în cele mai multe cazuri, puteți evita adăugarea de selectoare copii prin înlocuirea lor cu selectoare de context. Cu toate acestea, utilizarea selectoarelor de copii extinde capacitatea de a controla stilurile de elemente, ceea ce vă permite în cele din urmă să obțineți rezultatul dorit, precum și un cod simplu și clar.
Cel mai convenabil este să utilizați acești selectori pentru elemente care au o structură ierarhică - aceasta include, de exemplu, tabele și diverse liste. Exemplul 12.3 arată modificarea aspectului unei liste folosind stiluri. Prin imbricarea unei liste în alta obținem un tip de meniu. În acest caz, titlurile sunt situate orizontal, iar setul de legături este situat vertical sub titluri (Fig. 12.3).
Orez. 12.3. Lista ca meniu
Pentru a poziționa textul pe orizontală, proprietatea stil float este adăugată la selectorul LI. Pentru a separa stilul unei liste orizontale și verticale, se folosesc selectoare pentru copii (exemplul 12.3).
Exemplul 12.3. Utilizarea selectoarelor pentru copii
HTML5 CSS 2.1 IE Cr Op Sa Fx
Selectoare pentru copii
În acest exemplu, selectoarele de copii sunt obligate să separe stilul elementelor de listă de nivel superior și listele imbricate, care servesc unor scopuri diferite, astfel încât stilul pentru acestea să nu se suprapună.
Întrebări de verificat
1. Ce culoare va fi textul cursiv aldine din cod?
Standardele de iluminare se bazează pe pe baza clasificării lucrărilor vizuale după anumite caracteristici cantitative.
Când utilizați următorul stil?
P (culoare: verde; )
B (culoare: albastru; )
I (culoare: portocaliu; )
B > I (culoare: măsline; )
P > I (culoare: galben; )
- Verde.
- Albastru.
- Portocale.
- măsline.
- Galben.
2. Care element este elementul părinte pentru etichetă ?
</b></p>
<ol><li><HEAD></li>
<li><BODY></li>
<li><HTML></li>
<li><META></li>
<li><!DOCTYPE></li>
</ol><p><b>3. Pentru care etichetă este elementul<!DOCTYPE>actioneaza ca parinte?</b></p>
<ol><li><HTML></li>
<li><TITLE></li>
<li><BODY></li>
<li><HEAD></li>
<li>Nu pentru orice etichetă.</li>
</ol><h2>Răspunsuri</h2>
<p>1. Măslin.</p>
<p>3. Nu pentru orice etichetă.</p>
<p>Selectorii copii CSS sunt selectori care sunt utilizați pentru a aplica stiluri elementelor numai atunci când sunt copii ai altor elemente (părinte). Asemenea selectoarelor de descendenți, selectorii de copii sunt compuși și sunt formați din selectori simpli (clase, identificatori etc.).</p>
<p>Și din nou, dacă ați uitat ce sunt elementele copil, atunci să ne amintim uitându-ne la un exemplu care vă este deja familiar.</p><p>
<тег1>
<тег2>...</тег2>
<тег3><тег4>...</тег4></тег3>
</тег1>
</p><p>Se spune că un element este un copil al altui element dacă se află la primul nivel de cuibărit în interiorul acestuia. În exemplul nostru<тег2>Și<тег3>sunt fiice<тег1>, A<тег4>- aceasta este fiica mea<тег3>
.</p>
<p>Selectorii de copii constau din doi sau mai mulți selectori simpli, despărțiți de un semn „>”, unde este specificat mai întâi părintele, apoi copilul acestuia, apoi copilul acelui copil și așa mai departe. Adică, ca și în selectoarele de descendenți, este specificată calea prin arborele documentului. Stilurile vor fi aplicate numai acelor elemente ai căror selectori sunt ultimii în listă. Sintaxa generala:</p>
<p>selector1 > selector2 (</p>
<p>Spațiile de pe ambele părți ale semnului „>” pot fi plasate sau nu, după dorință.</p>
<p>Exemplu de utilizare a selectoarelor secundare CSS</p><p>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Selectoare pentru copii
Rezultat în browser
Paragraful 1.
paragraful 2.
Există două lucruri la care trebuie să fii atent în acest exemplu. Există trei elemente aici, dar doar două dintre ele au chenare, umplutură și margini. De ce? Și al doilea punct. Doar primul paragraf are text albastru.
Internet Explorer 6.0 nu înțelege selectoarele pentru copii, așa că dacă îți construiești site-ul având în vedere acest browser mai vechi - ține cont de asta.
Selectori copii în tabelele HTML
Mulți începători (și uneori nu începători) în crearea de site-uri web întâmpină anumite probleme atunci când folosesc selectoare copii în tabelele HTML. Ca să înțelegeți despre ce vorbim, să ne uităm la o astfel de masă obișnuită.
| Celula 1.1 | Celula 1.2 |
| Celula 2.1 | Celula 2.2 |
Și acum întrebarea. Ce ai face dacă ar fi nevoie să folosești selectoare pentru copii pentru a trece de la o etichetă la celule? Dacă decideți să scrieți așa, atunci este incorect:
tabel > tr > td ( Valoarea proprietății; Valoarea proprietății; ...)
Poți ghici de ce este greșit? Nu? Cert este că ați uitat de încă un element - care, chiar dacă nu este specificat explicit, este încă prezent invizibil în fiecare tabel HTML. Pur și simplu nu are etichetele necesare de deschidere și închidere, așa că este adesea uitat de el. Apropo, da, în Tutorial HTML Nu am trecut prin ea, pentru că, în realitate, indicarea sa explicită este rareori necesară. Ei bine, cred că ați ghicit deja care va fi intrarea corectă, dar vă voi arăta oricum.
table > tbody > tr > td ( Valoarea proprietății; Valoarea proprietății; ...)
Apropo, nu numai tabelele au elemente cu etichete de deschidere opționale, există și astfel de elemente. Doar că, în practică, „problemele uitării” apar cel mai des cu tabelele, motiv pentru care v-am atras atenția asupra acestui lucru.
Teme pentru acasă.
- Setați pagina la dimensiunea fontului Arial 0.9em și un fundal.
- Scrieți mai multe titluri și paragrafe pe pagină, modificați dimensiunea și culoarea textului titlului după cum credeți de cuviință.
- Asigurați-vă că linkurile direct în paragrafele paginii sunt albastre fără subliniere. Dar, în același timp, dacă linkurile sunt încadrate suplimentar cu orice etichetă, de exemplu pentru cursive, atunci acestea ar trebui să fie afișate subliniat și cu roșu. Încă o dată, vă atrag atenția asupra faptului că nu trebuie să specificați stiluri de link cu fiecare etichetă de încadrare separat, faceți-o universală. Cum? Gandeste-te la asta.
- Creați un mic meniu în partea dreaptă a paginii și reparați-l, pentru aceasta veți avea nevoie de o proprietate și de alte câteva proprietăți care o însoțesc, vă veți da seama acolo. În același timp, lăsați meniul nu numai să rămână pe loc în fereastra browserului, dar și să nu se strecoare în conținutul paginii atunci când derulați.
Cred că ultimul punct al lecției va fi cel mai dificil pentru tine, dar nu încerca să te cufunda complet în stăpânirea poziționării imediat. Fă-ți temele. Apropo, acest element nu va funcționa în Internet Explorer 6.0, deoarece bătrânul nu înțelege poziționarea fixă.
Cele mai bune articole pe această temă
