Nuk do të jetë më etiketa e parë e fëmijës. Në këtë rast, elementi i parë fëmijë do të jetë h2.
E njëjta gjë ndodh me rregullin p:fëmijë i fundit - stili CSS do të aplikohet në etiketë
Çdo etiketë tjetër e një lloji tjetër dhe do të shihni që rregulli p:fëmija i fundit nuk do të zbatohet më.
(kjo tregohet me numrin 3 në kllapa). Ngjyra e shkronjave për këtë paragraf bëhet e kuqe. Ju mund të ndryshoni numrin 3 (për shembull, në 2) dhe të shihni rezultatin.
Rregullat tr:n-të-fëmijë(tek) dhe tr:nth-fëmija(çift) funksionojnë respektivisht për elementët tr tek dhe çift. Mund ta shihni rezultatin në pamjen e ekranit, si dhe të kopjoni të gjithë kodin dhe të eksperimentoni vetë me stilet.
/* CSS */ p:first-of-type ( ngjyra: violet; transformimi i tekstit: shkronja të mëdha; ) p:last-of-type ( stili i shkronjave: italic; madhësia e shkronjave: 0.8em; ) p:nth- e llojit(3) (ngjyra: e kuqe; ) p:n-të e llojit (tek) (ngjyra e sfondit: #A2DED0; ) p: e n-ta e llojit (çift) (ngjyra e sfondit: #C8F7C5; ) h3: vetëm e llojit (dekorimi i tekstit: nënvizoni; )
Pamja e ekranit: duke aplikuar :first-of-type, :last-of-type, :nth-of-type dhe :only-of-type
Rregulli i parë CSS që shihni është p:first-of-type. Çfarë bën? Ai zgjedh një element fëmijë të tipit p i cili së pari gjendet tek prindi. Dhe nuk ka rëndësi se në cilin vend është ky etiketë midis elementeve të llojeve të tjera - i pari, i dyti apo i dhjeti. Ky është ndryshimi midis pseudo-klasave:first-child dhe: first-of-type.
Rregulli tjetër - p:nth-of-type(3) - ndryshon ngjyrën e shkronjave në të kuqe. Ky stil zbatohet në etiketë
. Por nëse nuk marrim parasysh elementë të llojeve të tjera, rezulton se etiketa
Me fontin e kuq është në vendin e tretë (ndër etiketat e llojit të tij). Kështu funksionon ky rregull.
Rregullat p:n-të-tipi(çift) dhe p:n-të-tipi(tek) funksionojnë në mënyrë të ngjashme: meqenëse emri p është dhënë përpara dy pikave, fëmijët çift dhe tek të tipit p zgjidhen dhe pikturohen në ngjyrat e dhëna. Elementët e mbetur anashkalohen.
Rregulli i fundit - h3: vetëm për llojin - zbatohet për përmbajtjen e etiketës
, duke e bërë tekstin të nënvizuar. Ky stil funksionon vetëm sepse etiketa është i vetmi element fëmijë i llojit të tij. Nëse shtoni një etiketë tjetër në kodin HTML , stili nuk do të aplikohet.
konkluzionet
Përzgjedhësi fëmijë CSS ju lejon të ndryshoni stilin e një elementi fëmijë të një dokumenti HTML bazuar në atë se kush është prindi i tij.
Duke përdorur pseudo-klasa shtesë: first-child, :last-child, :nth-child, :only-child, ju mund të stiloni elementët fëmijë të një dokumenti HTML, duke u fokusuar në vendndodhjen dhe numërimin e tyre në pemën e elementeve.
Pseudo-klasat: i pari i tipit, :i fundit i llojit, :nti i llojit, :vetëm i llojit ju lejojnë të aplikoni stil për elementët fëmijë të një dokumenti HTML, bazuar në llojin e tyre, gjithashtu si numërim në pemën e elementit .
Elementet fëmijë janë elementë që ndodhen direkt brenda një elementi prind. Vini re fjalët: direkt brenda.
Le të shohim një shembull të kodit të thjeshtë html:
Elementet fëmijë.
Paragrafi dhe në të yndyrore element, dhe ja ku është të prirur element.
Këtu yndyrore Dhe e nënvizuar dhe e zhdrejtë elementet.
Ky kod ka dy paragrafë. Ka elementë të linjës brenda paragrafëve
, Dhe . Në paragrafin e dytë etiketa i futur në një etiketë
.
Tani le të shtojmë stilet CSS në këtë kod html duke përdorur përzgjedhës fëmijë.
Sintaksa për përzgjedhësit e fëmijëve:
Zgjedhësi 1 > Zgjedhësi 2 ( Vetia: vlera; )
Këtu është kodi i përditësuar:
Elementet fëmijë.
Paragrafi dhe në të yndyrore element, dhe ja ku është të prirur element.
Këtu yndyrore Dhe e nënvizuar dhe e zhdrejtë elementet.
Pra, le të kujtojmë: një element fëmijë është një element i vendosur direkt në prind. Kjo do të thotë, një element fëmijë është një pasardhës i nivelit të parë. Le t'i kushtojmë vëmendje etiketës , në paragrafin e parë është futur në një etiketë
Dhe në të dytën është i futur në një etiketë , edhe pse është edhe një fëmijë i tagut
Prandaj, në paragrafin e dytë, rregulli CSS për përzgjedhësin e fëmijëve p>i (ngjyra: blu; ) nuk do të funksionojë - teksti i pjerrët i paragrafit të dytë nuk do të shfaqet me ngjyrë blu.
Figura 1. Shembulli #1 në punë.
Shkoni te elementi html paragrafi i dytë mund të përdoret duke përdorur rregullin CSS: p>u>i ( ngjyra : blu ; ).
Le të përdorim këtë rregull për të vendosur tekstin italik të paragrafit të dytë në të verdhë.
Elementet fëmijë.
Paragrafi dhe në të yndyrore element, dhe ja ku është të prirur element.
Këtu yndyrore Dhe e nënvizuar dhe e zhdrejtë elementet.
Ky stil do të funksionojë dhe teksti i pjerrët në paragrafin e dytë do të shfaqet në të verdhë.
Figura 2. Shembulli nr. 2 në veprim.
Shembull më kompleks
Ne kemi kodin html:
Elementet fëmijë.
Si parazgjedhje interpretohet si kjo:
Sfida: Duke përdorur CSS, kthejeni këtë listë në një menu horizontale.
Figura 3. Qëllimi i ndryshimit.
Këtu është një zgjidhje për këtë problem duke përdorur përzgjedhësit e fëmijëve:
Elementet fëmijë.
Për një kuptim më të mirë të këtij shembulli, lexoni më tej.
Vlad Merzheviç
Një element fëmijë është një element që ndodhet drejtpërdrejt brenda një elementi prind. Për të kuptuar më mirë marrëdhëniet midis elementeve të dokumentit, le të shohim një kod të vogël (shembulli 12.1).
Shembulli 12.1. Mbledhja e elementeve në një dokument
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ë këtë shembull, përdoren disa kontejnerë, të cilët ndodhen njëri brenda tjetrit në kod. Kjo mund të shihet më qartë në pemën e elementeve, që është emri që i është dhënë strukturës së marrëdhënieve ndërmjet etiketave të dokumenteve (Fig. 12.1).
Oriz. 12.1. Shembull pema e elementit
Në Fig. Figura 12.1 paraqet folenë e elementeve dhe hierarkinë e tyre në një formë të përshtatshme. Këtu është elementi fëmijë i etiketës
del etiketë
Megjithatë, etiketa nuk është një fëmijë i etiketës , pasi ndodhet në një enë
Le të kthehemi tani te përzgjedhësit. Një përzgjedhës fëmijë është ai që ndodhet direkt brenda elementit prind në pemën e elementit. Sintaksa për përdorimin e përzgjedhësve të tillë është si më poshtë.
Zgjedhësi 1 > Përzgjedhësi 2 (Përshkrimi i rregullave të stilit)
Stili zbatohet për përzgjedhësin 2, por vetëm nëse është një fëmijë i përzgjedhësit 1.
Duke iu referuar shembullit 12.1, stili i pamjes P > EM ( ngjyra: e kuqe ) do të vendosej në paragrafin e parë të dokumentit sepse etiketa ndodhet brenda kontejnerit Dhe nuk do të japë asnjë rezultat për paragrafin e dytë. Dhe të gjitha për shkak të etiketës në paragrafin e dytë ndodhet në një enë , prandaj cenohet kushti i folezimit.
Në logjikën e tyre, përzgjedhësit e fëmijëve janë të ngjashëm me përzgjedhësit e kontekstit. Dallimi midis tyre është si më poshtë. Një përzgjedhës fëmijë stilohet vetëm nëse është një fëmijë i drejtpërdrejtë, domethënë direkt brenda elementit prind. Për një përzgjedhës konteksti, lejohet çdo nivel foleje. Për ta bërë të qartë se për çfarë po flasim, le të shohim kodin e mëposhtëm (shembulli 12.2).
Shembulli 12.2. Përzgjedhës kontekstualë dhe fëmijë
HTML5 CSS 2.1 IE Cr Op Sa Fx
Përzgjedhës për fëmijë
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna Aliguam erat volutpat.
Rezultati i këtij shembulli është paraqitur në Fig. 12.2.
Oriz. 12.2. Vendosja e ngjyrave të tekstit duke përdorur një përzgjedhës për fëmijë
Për të etiketuar Në shembull, dy rregulla funksionojnë njëkohësisht: përzgjedhësi i kontekstit (etiketa ndodhet brenda ) dhe përzgjedhës për fëmijë (etiketë
është një filial i ). Në këtë rast, rregullat janë ekuivalente, pasi të gjitha kushtet për to janë plotësuar dhe nuk kundërshtojnë njëra-tjetrën. Në raste të tilla, zbatohet stili i treguar në kodin më poshtë, kështu që teksti i pjerrët shfaqet me të kuqe. Nëse ndryshoni rregullat dhe vendosni DIV I më poshtë, ngjyra e tekstit do të ndryshojë nga e kuqe në jeshile.
Vini re se në shumicën e rasteve mund të shmangni shtimin e përzgjedhësve fëmijë duke i zëvendësuar me përzgjedhës të kontekstit. Sidoqoftë, përdorimi i përzgjedhësve të fëmijëve zgjeron aftësinë për të kontrolluar stilet e elementeve, gjë që në fund ju lejon të merrni rezultatin e dëshiruar, si dhe kodin e thjeshtë dhe të qartë.
Përdorimi i këtyre përzgjedhësve është më i përshtatshëm për elementët që kanë një strukturë hierarkike - kjo përfshin, për shembull, tabela dhe lista të ndryshme. Shembulli 12.3 tregon ndryshimin e pamjes së një liste duke përdorur stile. Duke futur një listë në një tjetër ne marrim një lloj menuje. Në këtë rast, titujt vendosen horizontalisht, dhe grupi i lidhjeve ndodhet vertikalisht nën tituj (Fig. 12.3).
Oriz. 12.3. Listoni si menu
Për të pozicionuar tekstin horizontalisht, vetia e stilit float i shtohet përzgjedhësit LI. Për të ndarë stilin e një liste horizontale dhe vertikale, përdoren përzgjedhësit e fëmijëve (shembulli 12.3).
Shembulli 12.3. Përdorimi i përzgjedhësve për fëmijë
HTML5 CSS 2.1 IE Cr Op Sa Fx
Përzgjedhës për fëmijë
Në këtë shembull, përzgjedhësve të fëmijëve kërkohet të ndajnë stilin e artikujve të listës së nivelit të lartë dhe listat e ndërlidhura, të cilat shërbejnë për qëllime të ndryshme, kështu që stili për ta nuk duhet të mbivendoset.
Pyetje për të kontrolluar
1. Çfarë ngjyre do të ketë teksti i pjerrët kursive në kod?
Standardet e ndriçimit bazohen në bazuar në klasifikimin e punës pamore sipas karakteristikave të caktuara sasiore.
Kur përdorni stilin e mëposhtëm?
P (ngjyra: jeshile;)
B (ngjyra: blu;)
I (ngjyra: portokalli;)
B > I (ngjyra: ulliri; )
P > I (ngjyra: e verdhë; )
- E gjelbër.
- Blu.
- portokalli.
- Ulliri.
- E verdhe.
2. Cili element është elementi prind për etiketën ?
</b></p>
<ol><li><HEAD></li>
<li><BODY></li>
<li><HTML></li>
<li><META></li>
<li><!DOCTYPE></li>
</ol><p><b>3. Për cilin etiketë është elementi<!DOCTYPE>vepron si prind?</b></p>
<ol><li><HTML></li>
<li><TITLE></li>
<li><BODY></li>
<li><HEAD></li>
<li>Jo për asnjë etiketë.</li>
</ol><h2>Përgjigjet</h2>
<p>1. Ulliri.</p>
<p>3. Jo për asnjë etiketë.</p>
<p>Zgjedhësit fëmijë CSS janë përzgjedhës që përdoren për të aplikuar stile tek elementët vetëm kur ata janë fëmijë të elementeve të tjerë (prindër). Ashtu si përzgjedhësit pasardhës, përzgjedhësit e fëmijëve janë të përbërë dhe përbëhen nga përzgjedhës të thjeshtë (klasa, identifikues, etj.).</p>
<p>Dhe përsëri, nëse keni harruar se cilat janë elementet e fëmijëve, atëherë le të kujtojmë duke parë një shembull që është tashmë i njohur për ju.</p><p>
<тег1>
<тег2>...</тег2>
<тег3><тег4>...</тег4></тег3>
</тег1>
</p><p>Një element quhet fëmijë i një elementi tjetër nëse është në nivelin e parë të foleve brenda tij. Në shembullin tonë<тег2>Dhe<тег3>janë vajza<тег1>, A<тег4>- kjo është vajza ime<тег3>
.</p>
<p>Zgjedhësit e fëmijëve përbëhen nga dy ose më shumë përzgjedhës të thjeshtë të ndarë me një shenjë ">", ku specifikohet fillimisht prindi, më pas fëmija i tij, më pas fëmija i atij fëmije, e kështu me radhë. Kjo do të thotë, si në përzgjedhësit pasardhës, shtegu përmes pemës së dokumentit është specifikuar. Stilet do të aplikohen vetëm për ata elementë, përzgjedhësit e të cilëve janë të fundit në listë. Sintaksa e përgjithshme:</p>
<p>përzgjedhës1 > përzgjedhës2 (</p>
<p>Hapësirat në të dy anët e shenjës ">" mund të vendosen ose jo, sipas dëshirës.</p>
<p>Shembull i përdorimit të përzgjedhësve fëmijë 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>Përzgjedhës për fëmijë
Rezultati në shfletues
Paragrafi 1.
Paragrafi 2.
Ka dy gjëra që duhet t'i kushtoni vëmendje në këtë shembull. Këtu ka tre elementë, por vetëm dy prej tyre kanë kufij, mbushje dhe margjina. Pse? Dhe pika e dytë. Vetëm paragrafi i parë ka tekst blu.
Internet Explorer 6.0 nuk i kupton përzgjedhësit e fëmijëve, kështu që nëse po e ndërtoni faqen tuaj me këtë shfletues më të vjetër në mendje - mbani në mend këtë.
Përzgjedhës fëmijë në tabelat HTML
Shumë fillestarë (dhe nganjëherë jo fillestarë) në krijimin e faqeve të internetit hasin probleme të caktuara kur përdorin përzgjedhës fëmijë në tabelat HTML. Kështu që të kuptoni se për çfarë po flasim, le të shohim një tryezë kaq të zakonshme.
| Qeliza 1.1 | Qeliza 1.2 |
| Qeliza 2.1 | Qeliza 2.2 |
Dhe tani pyetja. Çfarë do të bënit nëse do t'ju duhej të përdornit përzgjedhësit e fëmijëve për të kaluar nga një etiketë në qeliza? Nëse vendosni të shkruani kështu, atëherë është e pasaktë:
tabela > tr > td ( prona: vlera; prona: vlera; ...)
A mund ta merrni me mend pse është gabim? Jo? Fakti është se keni harruar edhe një element tjetër - i cili, edhe nëse nuk specifikohet në mënyrë eksplicite, është ende i padukshëm i pranishëm në çdo tabelë HTML. Thjesht nuk ka etiketat e nevojshme të hapjes dhe mbylljes, kështu që shpesh harrohet. Nga rruga, po, në tutorial HTML Ne nuk e kaluam atë, sepse në realitet tregimi i tij i qartë është i nevojshëm rrallë. Epo, mendoj se tashmë e keni marrë me mend se cila do të jetë hyrja e saktë, por gjithsesi do t'ju tregoj.
tabela > tbody > tr > td ( prona: vlera; prona: vlera; ...)
Nga rruga, jo vetëm tabelat kanë elementë me etiketa hapëse opsionale, ka edhe elementë të tillë. Thjesht, në praktikë, "problemet e harresës" lindin më shpesh me tabelat, kjo është arsyeja pse ju tërhoqa vëmendjen për këtë.
Detyre shtepie.
- Vendosni faqen në madhësinë e shkronjave Arial 0.9em dhe një sfond.
- Shkruani disa tituj dhe paragrafë në faqe, ndryshoni madhësinë dhe ngjyrën e tekstit të titullit sipas mendimit tuaj.
- Sigurohuni që lidhjet direkt në paragrafët e faqeve janë blu pa nënvizuar. Por në të njëjtën kohë, nëse lidhjet janë të përshtatura shtesë me ndonjë etiketë, për shembull për shkronja të pjerrëta, atëherë ato duhet të shfaqen me një nënvizim dhe me të kuqe. Edhe një herë, unë tërheq vëmendjen tuaj për faktin se nuk keni nevojë të specifikoni stilet e lidhjeve me secilën etiketë kornizë veç e veç, duke e bërë atë universale. Si? Mendoni për këtë.
- Krijoni një menu të vogël në anën e djathtë të faqes dhe rregulloni atë, për këtë do t'ju duhet një pronë dhe disa veçori të tjera që e shoqërojnë atë, do ta kuptoni atje. Në të njëjtën kohë, lëreni menunë jo vetëm të qëndrojë në vend brenda dritares së shfletuesit, por edhe të mos zvarritet në përmbajtjen e faqes kur lëviz.
Unë mendoj se pika e fundit e mësimit do të jetë më e vështira për ju, por mos u përpiqni të zhyteni plotësisht në zotërimin e pozicionimit menjëherë. Thjesht bëni detyrat e shtëpisë tuaj. Nga rruga, ky artikull nuk do të funksionojë në Internet Explorer 6.0, pasi plaku nuk e kupton pozicionimin fiks.
Artikujt më të mirë mbi këtë temë
