Teknikat DOM: elementet e prindit, fëmijës dhe fqinjit. CSS - Përzgjedhësit e marrëdhënieve

24.06.2019 Windows 8

Aplikacionet komplekse dhe të rënda në internet janë bërë të zakonshme këto ditë. Bibliotekat ndër-shfletuese dhe të lehta për t'u përdorur si jQuery me funksionalitetin e tyre të pasur mund të ndihmojnë shumë në manipulimin e DOM-it në fluturim. Prandaj, nuk është për t'u habitur që shumë zhvillues përdorin biblioteka të tilla më shpesh sesa të punojnë me API-në amtare DOM, me të cilën kishte shumë probleme. Ndërsa dallimet e shfletuesit janë ende një problem, DOM është në gjendje më të mirë tani sesa ishte 5-6 vjet më parë kur jQuery po fitonte popullaritet.

Në këtë artikull, unë do të demonstroj aftësitë e manipulimit HTML të DOM-it, duke u fokusuar në marrëdhëniet e prindërve, fëmijëve dhe fqinjëve. Si përfundim, unë do të jap informacion në lidhje me mbështetjen e shfletuesit për këto veçori, por mbani në mend se një bibliotekë si jQuery është ende një opsion i mirë për shkak të pranisë së gabimeve dhe mospërputhjeve në zbatimin e funksionalitetit vendas.

Numërimi i nyjeve të fëmijëve

Unë do të përdor shënjimin e mëposhtëm HTML për këtë demonstrim dhe do ta ndryshojmë atë disa herë gjatë gjithë artikullit:

Shembulli një
Shembulli dy
Shembulli tre
Shembulli katër
Shembulli pesë
Shembulli i gjashtë

Var myList = document.getElementById("Lista ime"); console.log(myList.children.length); // 6 console.log (myList.childElementCount); // 6

Siç mund ta shihni, rezultatet janë të njëjta, megjithëse teknikat e përdorura janë të ndryshme. Në rastin e parë përdor pronën e fëmijëve. Kjo është një veti vetëm për lexim dhe kthen koleksionin e elementeve HTML që gjenden brenda elementit të kërkuar; Për të numëruar numrin e tyre, përdor veçorinë gjatësi të këtij koleksioni.

Në shembullin e dytë, unë jam duke përdorur metodën childElementCount, e cila mendoj se është një mënyrë më e rregullt dhe potencialisht më e mirëmbajtur (diskutoni këtë më vonë, nuk mendoj se do të keni vështirësi të kuptoni se çfarë bën).

Mund të provoj të përdor childNodes.length (në vend të children.length), por shiko rezultatin:

Var myList = document.getElementById("Lista ime"); console.log (myList.childNodes.length); // 13

Ai kthen 13 sepse childNodes është një koleksion i të gjitha nyjeve, duke përfshirë hapësirat - mbani në mend këtë nëse ju intereson ndryshimi midis nyjeve të fëmijëve dhe nyjeve të elementeve fëmijë.

Kontrollimi i ekzistencës së nyjeve të fëmijëve

Për të kontrolluar nëse një element ka nyje fëmijë, mund të përdor metodën hasChildNodes(). Metoda kthen një vlerë Boolean që tregon praninë ose mungesën e tyre:

Var myList = document.getElementById("Lista ime"); console.log(myList.hasChildNodes()); // e vërtetë

E di që lista ime ka nyje fëmijë, por mund ta ndryshoj HTML-në në mënyrë që të mos ketë asnjë; Shënimi tani duket si ky:

Dhe këtu është rezultati i ekzekutimit të hasChildNodes() përsëri:

Console.log(myList.hasChildNodes()); // e vërtetë

Metoda ende kthehet e vërtetë. Edhe pse lista nuk përmban asnjë element, ajo përmban një hapësirë, e cila është një lloj i vlefshëm nyje. Kjo metodë merr parasysh të gjitha nyjet, jo vetëm nyjet e elementeve. Në mënyrë që hasChildNodes() të kthejë false, duhet të ndryshojmë përsëri shënimin:

Dhe tani rezultati i pritur shfaqet në tastierë:

Console.log(myList.hasChildNodes()); // i rremë

Natyrisht, nëse e di që mund të ndeshem me hapësirë të bardhë, së pari do të kontrolloj ekzistencën e nyjeve fëmijë, më pas do të përdor veçorinë nodeType për të përcaktuar nëse ka ndonjë nyje elementi midis tyre.

Shtimi dhe heqja e elementeve të fëmijëve

Ka teknika që mund të përdorni për të shtuar dhe hequr elementë nga DOM. Më e famshmja prej tyre bazohet në një kombinim të metodave createElement() dhe appendChild().

Var myEl = dokument.createElement("div"); dokument.trupi.appendChild(myEl);

Në këtë rast unë krijoj

duke përdorur metodën createElement() dhe më pas duke e shtuar atë në body. Është shumë e thjeshtë dhe me siguri e keni përdorur më parë këtë teknikë.

Por në vend që të fus një element të krijuar posaçërisht, unë mund të përdor gjithashtu appendChild() dhe thjesht të lëviz elementin ekzistues. Le të themi se kemi shënimin e mëposhtëm:

Shembulli një
Shembulli dy
Shembulli tre
Shembulli katër
Shembulli pesë
Shembulli i gjashtë

Shembull teksti

Mund të ndryshoj vendndodhjen e listës me kodin e mëposhtëm:

Var myList = dokument.getElementById("Lista ime"), kontejner = document.getElementById("c"); kontejner.appendChild(myList);

DOM përfundimtar do të duket kështu:

Shembull teksti

Shembulli një
Shembulli dy
Shembulli tre
Shembulli katër
Shembulli pesë
Shembulli i gjashtë

Vini re se e gjithë lista është hequr nga vendi i saj (sipër paragrafit) dhe më pas është futur pas saj përpara trupit mbyllës. Ndërsa metoda appendChild() përdoret zakonisht për të shtuar elementë të krijuar me createElement(), ajo mund të përdoret gjithashtu për të lëvizur elementët ekzistues.

Unë gjithashtu mund të heq plotësisht një element fëmijë nga DOM duke përdorur removeChild() . Ja se si të fshini listën tonë nga shembulli i mëparshëm:

Var myList = dokument.getElementById("Lista ime"), kontejner = document.getElementById("c"); kontejner.removeChild(myList);

Elementi tani është hequr. Metoda removeChild() kthen elementin e hequr në mënyrë që ta ruaj në rast se më nevojitet më vonë.

Var myOldChild = document.body.removeChild(myList); dokument.trupi.appendChild(myOldChild);

Ekziston gjithashtu një metodë ChildNode.remove() që u shtua relativisht kohët e fundit në specifikim:

Var myList = document.getElementById("Lista ime"); myList.remove();

Kjo metodë nuk e kthen objektin në distancë dhe nuk funksionon në IE (vetëm Edge). Dhe të dyja metodat heqin nyjet e tekstit në të njëjtën mënyrë si nyjet e elementeve.

Zëvendësimi i elementeve të fëmijëve

Mund të zëvendësoj një element fëmijë ekzistues me një të ri, pavarësisht nëse ai element i ri ekziston ose nëse e kam krijuar nga e para. Këtu është shënimi:

Shembull Teksti

Var myPar = document.getElementById("par"), myDiv = document.createElement("div"); myDiv.className = "shembull"; myDiv.appendChild(document.createTextNode("Teksti i elementit të ri")); document.body.replaceChild(myDiv, myPar);

Teksti i elementit të ri

Siç mund ta shihni, metoda replaceChild() merr dy argumente: elementin e ri dhe elementin e vjetër që zëvendëson.

Unë gjithashtu mund ta përdor këtë metodë për të lëvizur një element ekzistues. Hidhini një sy HTML-së së mëposhtme:

Shembull teksti 1

Shembull teksti 2

Shembull teksti 3

Mund ta zëvendësoj paragrafin e tretë me paragrafin e parë duke përdorur kodin e mëposhtëm:

Var myPar1 = document.getElementById("par1"), myPar3 = document.getElementById("par3"); document.body.replaceChild(myPar1, myPar3);

Tani DOM-i i krijuar duket kështu:

Shembull teksti 2

Shembull teksti 1

Përzgjedhja e fëmijëve të veçantë

Ka disa mënyra të ndryshme për të zgjedhur një element specifik. Siç u tregua më herët, mund të filloj duke përdorur koleksionin e fëmijëve ose pronën childNodes. Por le të shohim opsionet e tjera:

Karakteristikat firstElementChild dhe lastElementChild bëjnë pikërisht atë që sugjerojnë emrat e tyre: zgjidhni elementin e parë dhe të fundit të fëmijës. Le të kthehemi te shënimi ynë:

Shembulli një
Shembulli dy
Shembulli tre
Shembulli katër
Shembulli pesë
Shembulli i gjashtë

Mund të zgjedh elementin e parë dhe të fundit duke përdorur këto veti:

Var myList = document.getElementById("Lista ime"); console.log(myList.firstElementChild.innerHTML); // "Shembulli një" console.log(myList.lastElementChild.innerHTML); // "Shembulli gjashtë"

Mund të përdor gjithashtu vetitë e mëparshmeElementSibling dhe NextElementSibling nëse dua të zgjedh elementë fëmijë të ndryshëm nga i pari ose i fundit. Kjo bëhet duke kombinuar vetitë firstElementChild dhe lastElementChild:

Var myList = document.getElementById("Lista ime"); console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Shembulli dy" console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Shembulli pesë"

Ka edhe veti të ngjashme firstChild , lastChild , previousSibling , dhe nextSibling , por ato marrin parasysh të gjitha llojet e nyjeve, jo vetëm elementet. Në përgjithësi, vetitë që marrin parasysh vetëm nyjet e elementeve janë më të dobishme se ato që përzgjedhin të gjitha nyjet.

Futja e përmbajtjes në DOM

Unë kam shikuar tashmë mënyrat për të futur elementë në DOM. Le të kalojmë në një temë të ngjashme dhe të hedhim një vështrim në veçoritë e reja për futjen e përmbajtjes.

Së pari, ekziston një metodë e thjeshtë insertBefore(), e ngjashme me zëvendësiminChild(), ajo merr dy argumente dhe funksionon si me elementët e rinj ashtu edhe me ato ekzistuese. Këtu është shënimi:

Shembulli një
Shembulli dy
Shembulli tre
Shembulli katër
Shembulli pesë
Shembulli i gjashtë

Shembull Paragraf

Vini re paragrafin që do të heq fillimisht dhe më pas do ta fus përpara listës, të gjitha në një goditje:

Var myList = document.getElementById("Lista ime"), kontejner = document.getElementBy("c"), myPar = document.getElementById("par"); container.insertBefore(myPar, myList);

Në HTML-në që rezulton, paragrafi do të shfaqet përpara listës dhe kjo është një mënyrë tjetër për të mbështjellë elementin.

Shembull Paragraf

Shembulli një
Shembulli dy
Shembulli tre
Shembulli katër
Shembulli pesë
Shembulli i gjashtë

Ashtu si replaceChild(), insertBefore() merr dy argumente: elementin që duhet shtuar dhe elementin para të cilit duam ta fusim.

Kjo metodë është e thjeshtë. Le të provojmë tani një metodë më të fuqishme të futjes: metodën insertAdjacentHTML().

Në këtë mësim, ne do të mësojmë rreth përzgjedhësve të marrëdhënieve, të cilët përdoren për të zgjedhur elementë bazuar në mënyrën se si ato lidhen me elementët e tjerë në një faqe interneti.

Llojet e marrëdhënieve ndërmjet elementeve

Çdo element në një faqe interneti mund të lidhet me një element tjetër duke përdorur një nga marrëdhëniet e mëposhtme:

element prind, paraardhës i drejtpërdrejtë - një element që përmban një ose më shumë elementë të vendosur brenda tij. Në lidhje me këto elemente të ngulitura tek ai, ai është prindi i tyre;
element fëmijë, pasardhës i drejtpërdrejtë, fëmijë, fëmijë - element që është i folezuar në një element prind dhe në lidhje me të është një element fëmijë, d.m.th. fëmijën e tij;
element fqinj, vëlla (vëlla ose motër) - elementë që kanë një prind të përbashkët. Elementë të tillë janë vëllezërit e motrat (fqinjët) në raport me njëri-tjetrin.

Merrni parasysh shembullin e mëposhtëm:

Ky kod mund të paraqitet si diagrami i mëposhtëm:

Në shembullin e mësipërm, le të zgjedhim elementin p dhe të shohim se si lidhet me elementët e tjerë në kod:

Elementi mëmë është div;
Elementi ngjitur është h1;
Pasardhësit e drejtpërdrejtë, fëmijët – elementë të fortë, em.

Elementi1 Elementi2

Në këtë përzgjedhës, elementi 1 dhe elementi 2 lidhen nga një marrëdhënie paraardhës-pasardhës. ato. përdoret për të zgjedhur elementet2 që ndodhen brenda elementit1 në një dokument HTML. Me fjalë të tjera, ai përzgjedh të gjithë elementët2 që janë fëmijë të elementit1.

Për shembull, zgjidhni dhe stiloni çdo element p që është fëmijë i një elementi div:

Div p (ngjyra: e kuqe; )

Teksti 1

Teksti 2

Teksti 4

teksti 5

Elementi1 > Elementi2

Në këtë përzgjedhës, elementi 1 dhe elementi 2 lidhen me marrëdhënien prind > fëmijë. ato. përdoret për të zgjedhur elementet2 që janë fëmijë të elementit1. Me fjalë të tjera, ai përzgjedh të gjithë elementët2 që kanë elementin1 si prind imediat.

Për shembull, zgjidhni dhe stiloni çdo element p prindi i të cilit është një element div:

Div > p ( ngjyra: e kuqe; )

Teksti 1

Teksti 2

teksti 5

Elementi 1 + Elementi 2

Përzgjedhësi Element1 + Element2 është krijuar për të zgjedhur elementët2 që ndodhen menjëherë pas elementit1, dhe ata janë fqinjë në raport me njëri-tjetrin. Me fjalë të tjera, ky përzgjedhës përdoret për të zgjedhur elementin2 që ndodhet menjëherë pas elementit1 dhe duhet të kenë të njëjtin prind në dokumentin HTML.

Për shembull, zgjidhni dhe stiloni çdo element p që ndodhet menjëherë pas elementit div. Për më tepër, ju duhet të zgjidhni vetëm ata elementë p që janë në të njëjtin nivel foleje me elementët div, d.m.th. ata duhet të jenë fqinjë me njëri-tjetrin:

Div + p (ngjyra: e kuqe; )

Teksti 1

Teksti 2

Teksti 3

Elementi1 ~ Elementi2

Përzgjedhësi Element1 ~ Element2 është i destinuar për zgjedhjen e elementeve2 që ndodhen pas elementit1, dhe janë fqinjë në raport me njëri-tjetrin. Me fjalë të tjera, ky përzgjedhës përdoret për të zgjedhur elementët2 që ndodhen pas elementit1, dhe duhet të kenë të njëjtin prind në dokumentin HTML.

Për shembull, zgjidhni dhe stiloni çdo element p që ndodhet pas elementit div. Për më tepër, ju duhet të zgjidhni vetëm ata elementë p që janë në të njëjtin nivel foleje me elementët div, d.m.th. ata duhet të jenë fqinjë me njëri-tjetrin:

Div ~ p (ngjyra: e kuqe; )

Teksti 1

Teksti 2

Teksti 3-1

Përshëndetje, të dashur lexues. Në artikujt e mëparshëm, ne studiuam kryesisht atributet e stilit CSS. Ka shumë prej tyre. Disa vendosin parametrat e shkronjave, të tjerë parametrat e sfondit dhe të tjerë parametrat për indencat dhe kornizat.

Në këtë artikull do të flasim për përzgjedhësit e stilit. Në një nga artikujt që kemi prekur tashmë. Sot do të shikojmë disa lloje të tjera përzgjedhësish që nuk lidhin në mënyrë eksplicite një rregull stili me një element të faqes në internet. Këta janë të ashtuquajturit përzgjedhës specialë. Ka disa lloje të tyre.

Kombinuesit në CSS (përzgjedhës të ngjitur, të fëmijëve dhe të kontekstit)

Kombinatorët janë një lloj përzgjedhësish CSS që lidhin një rregull stili me një element të faqes në internet bazuar në vendndodhjen e tij në lidhje me elementët e tjerë.

Simboli i parë i kombinatorit plus(+) ose përzgjedhës ngjitur. Plus vendoset midis dy përzgjedhësve:

<селектор 1> + <селектор 2> { <стиль> }

Stili në këtë rast zbatohet për përzgjedhës 2, por vetëm nëse është ngjitur me përzgjedhës 1 dhe vjen menjëherë pas saj. Le të shohim një shembull:

i forte + i (

}
...

Ky është tekst normal. Ky është tekst i guximshëm, Teksti i thjeshtë, tekst i kuq

Ky është tekst normal. Ky është tekst i guximshëm, Teksti i thjeshtë, dhe ky është tekst normal.

Rezultati:

Stili i përshkruar në shembull do të zbatohet vetëm në tekstin e parë të mbyllur në etiketë , sepse vjen menjëherë pas etiketës .

Kombinator tildë(~) vlen edhe për përzgjedhësit ngjitur, por këtë herë mund të ketë elementë të tjerë midis tyre. Në këtë rast, të dy përzgjedhësit duhet të vendosen në të njëjtën etiketë prind:

<селектор 1> ~ <селектор 2> { <стиль> }

Stili do të aplikohet në përzgjedhës 2 të cilat duhet të pasojnë përzgjedhës 1. Konsideroni një shembull:

i fortë ~ (
ngjyra: e kuqe; /* Ngjyra e kuqe e tekstit */
}
...

Ky është tekst normal. Ky është tekst i guximshëm, Teksti i thjeshtë, tekst i kuq rregulli i përzgjedhësit ngjitur që zbatohet për të.

Ky është tekst normal. Ky është tekst i guximshëm, Teksti i thjeshtë, dhe ky është tekst i kuq.

Rezultati:

Siç mund ta shihni, këtë herë rregulli i stilit funksionoi për të dy tekstet e mbyllura në etiketë , pavarësisht se në rastin e dytë ndërmjet etiketës Dhe ia vlen tag .

Kombinator > i referohet përzgjedhës për fëmijë. Ju lejon të lidhni stilin CSS me një element të faqes në internet që ndodhet drejtpërdrejt brenda një elementi tjetër:

<селектор 1> > <селектор 2> { <стиль> }

Stili do të lidhet me përzgjedhës 2, e cila është e vendosur direkt në përzgjedhës 1.

div > e fortë (

}
...

Ky është tekst normal. Ky është tekst i theksuar i pjerrët.

Ky është tekst normal. Dhe ky është tekst i rregullt i guximshëm.

Dhe rezultati:

Siç mund ta shihni në figurë, rregulli i stilit ndikoi vetëm në etiketën e parë , e cila është e vendosur direkt brenda etiketës
. Dhe prindi i menjëhershëm i etiketës së dytë është etiketa
, kështu që rregulli nuk vlen për të.

Më tej do të shikojmë përzgjedhës i kontekstit<пробел> . Kjo ju lejon të lidhni një stil CSS me një element të vendosur brenda një elementi tjetër, dhe mund të ketë çdo nivel foleje:

<селектор 1> <селектор 2> { <стиль> }

Stili do të aplikohet në përzgjedhës 2, nëse është futur disi brenda përzgjedhës 1.

Le të shohim shembullin e mëparshëm, vetëm kur përshkruajmë një rregull CSS, mund të përdorim përzgjedhësin e kontekstit:

div fort (
stili i shkronjave: italic /* italic */
}
...

Ky është tekst normal. Ky është tekst i theksuar i pjerrët.

Ky është tekst normal. Dhe ky është gjithashtu tekst i theksuar i pjerrët.

Tekst i thjeshtë dhe thjesht tekst i theksuar

Rezultati:

Siç mund ta shihni, këtë herë rregulli preku të dy etiketat , qoftë edhe ai që është folezuar në një enë
dhe në një paragraf
. Për të etiketuar , i cili thjesht futet brenda një paragrafi
Rregulli css nuk funksionon fare.

Zgjedhësit sipas atributeve të etiketës

Përzgjedhësit e atributeve janë përzgjedhës të veçantë që lidhin një stil me një element bazuar në faktin nëse ai përmban një atribut të caktuar ose ka një vlerë të caktuar. Ekzistojnë disa opsione për përdorimin e përzgjedhësve të tillë.

1. Përzgjedhës i thjeshtë i atributeve

Duket si:

<селектор>[<имя атрибута тега>] { <стиль> }

Dhe lidh stilin me ato elemente brenda të cilave shtohet atributi i specifikuar. Për shembull:

e forte(
ngjyra: e kuqe;
}
...

Automobil ky është një motor mekanik pa gjurmë mjet rrugor me të paktën 4 rrota.

Rezultati:

Në foto mund të shihni se rregulli css (ngjyra e kuqe e tekstit) zbatohet në element të fortë, të cilit i shtohet atributi titullin.

2. Zgjedhësi i atributeve me vlerë

Sintaksa për këtë përzgjedhës është si më poshtë:

<селектор>[<имя атрибута тега>=<значение>] { <стиль> }

Lidh stil tek elementët, etiketat e të cilëve kanë një atribut me të specifikuarin emri Dhe kuptimi. Shembull:

a(
ngjyra: e kuqe;
madhësia e shkronjave: 150%;
}
...
.ru" target="_blank">Lidhja në dritare të re

Rezultati:

Siç mund ta shihni, të dy elementët e llojit të hiperlidhjes kanë atributin objektiv, por rregulli css që e zmadhon tekstin e lidhjes me një herë e gjysmë dhe e ndryshon ngjyrën e tij në të kuqe zbatohet në etiketë atributi i të cilit objektiv ka kuptimin "_bosh".

3. Një nga disa vlera të atributeve

Disa vlera të atributeve mund të ndahen me hapësira, siç janë emrat e klasave. Për të vendosur një rregull stili kur vlera e kërkuar është e pranishme në listën e vlerave të atributeve, përdorni përzgjedhësin e mëposhtëm:

[<имя атрибута тега>~=<значение>] { <стиль> }
<основной селектор>[<имя атрибута тега>~=<значение>] { <стиль> }

Stili zbatohet nëse atributi ka vlerën e kërkuar ose është pjesë e një liste vlerash të ndara me hapësirë. Për shembull:

{
ngjyra: e kuqe;
madhësia e shkronjave: 150%;
}
...

Telefoni ynë: 777-77-77

Adresa jone: Rruga e Moskës. Sovetskaya 5

Do të merrni rezultatin e mëposhtëm:

Rregulli zbatohet për një element, vlerat e atributeve të të cilit përfshijnë: klasës ka një kuptim tel.

4. Vizë në vlerën e atributit

Një vizë është e lejuar në vlerat e identifikuesit dhe klasës. Për të lidhur një stil me elementë, vlerat e atributeve të të cilëve mund të përmbajnë një vizë, mund të përdorni konstruksionin e mëposhtëm:

[atribut|="vlera"] (stili)
Zgjedhësi[atribut|="vlera"] (stili)

Stili zbatohet për ata elementë vlera e atributit të të cilëve fillon me vlerën e specifikuar e ndjekur nga një vizë ndarëse. Për shembull:

{
ngjyra: e kuqe;
madhësia e shkronjave: 150%;
}
...

Paragrafi 1

Pika 2

Pika 3

Pika 4

Rezultati:

Në shembull, rregulli i stilit zbatohet vetëm për ata elementë të listës, emri i klasës së të cilëve fillon me vlerë "menu- ".

5. Vlera e atributit fillon me tekst specifik

Ky përzgjedhës vendos stilin për një element nëse vlera e atributit të etiketës fillon me një vlerë specifike. Mund të ketë dy opsione:

[<имя атрибута тега>^=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>^=<подстрока>] { <стиль> }

Në rastin e parë stil vlen për të gjithë elementët, etiketat e të cilëve kanë një atribut me të specifikuarin emri dhe një vlerë që fillon me të specifikuarin nënstrings. Në rastin e dytë, e njëjta gjë, vetëm për disa elementë të specifikuar në përzgjedhës kryesor. Shembull:

a(
ngjyra: jeshile;
font-pesha: bold;
}
...

Rezultati:

Shembulli tregon se si të shfaqen lidhjet e jashtme dhe lidhjet e brendshme në mënyra të ndryshme. Lidhjet e jashtme gjithmonë fillojnë me vargun "http://". Prandaj, në përzgjedhës tregojmë se stili do të aplikohet vetëm për lidhjet që kanë atributin href fillon me kuptimin http://.

6. Vlera e atributit përfundon me tekst të caktuar

Lidh një stil me elementë, vlera e atributit të të cilëve përfundon me tekstin e specifikuar. Ka sintaksën e mëposhtme:

[<имя атрибута тега>$=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>$=<подстрока>] { <стиль> }

Në rastin e parë stil vlen për të gjithë elementët që kanë atribut me të specifikuarit emri dhe ka një kuptim që përfundon me të specifikuarin nënvarg. Në rastin e dytë, e njëjta gjë, vetëm për të treguarit përzgjedhësve. Në këtë mënyrë, për shembull, formate të ndryshme të imazheve grafike mund të shfaqen ndryshe. Për shembull:

IMG (
kufiri: 5px e kuqe e fortë;
}
...

Imazhi GIF

Formati i figurës png

Rezultati:

Në shembull, të gjitha imazhet me një shtrirje gif do të shfaqen me një kufi të kuq të trashë pesë piksel.

7. Vlera e atributit përmban vargun e specifikuar

Ky përzgjedhës lidh një stil me etiketat, vlera e atributit të të cilave përmban tekst specifik. Sintaksë:

[<имя атрибута тега>*=<подстрока>] { <стиль> }
<основной селектор>[<имя атрибута тега>*=<подстрока>] { <стиль> }

Stili lidhet me elementet që kanë atribut me emrin e caktuar dhe vlera e tij përmban të specifikuarin nënvarg. Për shembull:

IMG (
kufiri: 5px e kuqe e fortë;
}
...

Foto nga dosja e galerisë

Foto nga një dosje tjetër

Rezultati:

Në shembull, stili zbatohet për fotot që ngarkohen nga dosja "galeri".

Kjo ka të bëjë me përzgjedhësit e atributeve. Të gjitha metodat e mësipërme mund të kombinohen me njëra-tjetrën:

Përzgjedhësi[attribute1="value1"][attribute2="vlera2"] (stili)

Për më tepër, më lejoni t'ju kujtoj për përzgjedhësit e veçantë të CSS:

duke përdorur simbolet "+" dhe "~" formohen;

simboli ">" lidh stilet css me filialet etiketa;

simbol<пробел>gjeneron përzgjedhës të kontekstit.

Në artikujt e ardhshëm, ne do të shikojmë gjithashtu pseudo-elementet dhe pseudo-klasat, të cilat ofrojnë mjete të fuqishme të menaxhimit të stilit.

Kjo është e gjitha, shihemi përsëri.

Përshëndetje, lexues të dashur! Ne vazhdojmë temën e përzgjedhësve të CSS dhe sot do të përpiqem të shpjegoj qartë se cilat janë ato përzgjedhësit ngjitur CSS, dhe gjithashtu çfarë roli luan? përzgjedhës universal. Njohja e mekanizmit për përdorimin e të gjitha llojeve të mjeteve CSS do t'ju lejojë të arrini përmbajtjen optimale dhe kompakte të dokumentit ku përshkruhen stilet e elementeve, i cili është një nga komponentët e promovimit të suksesshëm të burimit tuaj, kështu që në asnjë rast mos e neglizhoni mundësinë për merrni informacione të dobishme rreth konceptit të një përzgjedhësi dhe llojeve të ndryshme të tij.

Nëse mbani mend dhe ndiqni me kujdes botimet, tashmë janë marrë në konsideratë shumë lloje përzgjedhësish; ; . Edhe një herë, ju bëj thirrje që të mos neglizhoni mësimin e bazave të CSS, pasi kjo do t'ju japë shumë përparësi në të ardhmen.

Zgjedhës universal

Tani le të kalojmë drejtpërdrejt në thelbin e botimit të sotëm. Sa i përket përzgjedhësit universal, është mjaft i thjeshtë, kështu që nuk do të ndalem në të për një kohë të gjatë. Sintaksa për të shkruar një rregull CSS që përdor një përzgjedhës universal është si më poshtë:

Këtu operatori "*" do të thotë se kemi një përzgjedhës universal. Përdoret kur është e nevojshme të vendosni një stil të vetëm për të gjithë elementët në një faqe interneti. Ndonjëherë një përzgjedhës universal nuk është i nevojshëm. Për shembull, hyrja .*class dhe .class janë plotësisht identike në këto raste. Tani me siguri një shembull. Në mënyrë tipike, më e zakonshme është të përcaktohet një font, madhësia dhe ngjyra e qëndrueshme, dhe vendosja e tekstit të rregullt në një faqe blogu ose uebsajti.
* ( font-familja: Tahoma, Arial, Helvetica, sans-serif; /* Shkronja e tekstit */ ngjyra: #646464; /* Ngjyra e tekstit */ madhësia e shkronjave: 75%; /* Madhësia e tekstit */ rreshtimi i tekstit: majtas; /* Vendndodhja e tekstit */ )
Në këtë mënyrë ju mund të përcaktoni dizajnin e tekstit për të gjithë elementët që ndodhen në faqe. Më lejoni të vërej se në këtë rast rezultati do të jetë i ngjashëm nëse, në vend të një përzgjedhësi universal, përdorni emrin e etiketës së trupit, i cili përfshin etiketat e të gjithë elementëve.

Përzgjedhës CSS ngjitur

Epo, tani le të kalojmë pak më shumë kohë për përzgjedhësit fqinjë. Elementet në një faqe interneti përcaktohen si ngjitur kur shfaqen drejtpërdrejt pranë njëri-tjetrit në kodin e dokumentit. Në këtë rast, sintaksa e stileve CSS duket si kjo:

Tani merrni një paragraf të tekstit të përcaktuar nga etiketa p, i cili do të përfshijë etiketat b, i dhe big si elementë fëmijë, duke përcaktuar formatimin e tekstit, përkatësisht, fontin e theksuar, italik dhe të zmadhuar:

Ky paragraf përdor etiketë b, tag i, etiketë e madhe.

Dhe duke përdorur mjetin e redaktimit CSS dhe HTML, i cili është i integruar në versionet më të fundit të të gjithë shfletuesve të njohur (,) dhe që është një analog i shtojcës së famshme të shfletuesit Firefox (), ne do ta fusim këtë paragraf kudo në absolutisht çdo faqe interneti (I e bëri siç duhet në faqen e artikullit të mëparshëm, paragrafi i parë). Ky mjet, për shembull, në Chrome thirret thjesht duke shtypur tastin F12. Mund të përdoret për përforcimin praktik të materialit në seksionet "Bazat e HTML" dhe "CSS Tutorial". Pra, fus një pjesë të tekstit si paragrafin e parë:

Ky paragraf do të jetë eksperimental dhe duke përdorur shembullin e tij do të shqyrtojmë aplikacionin përzgjedhësit ngjitur. Siç thashë, etiketat b, i dhe të mëdha janë fëmijë të etiketës së paragrafit p, sepse janë të gjitha direkt brenda kontejnerit p. Këtu etiketat ngjitur janë b dhe i, si dhe i dhe i madh. Tani le të zbatojmë rregullin CSS për përzgjedhësit ngjitur:
B+i (ngjyra: e kuqe;) i+big (ngjyra: jeshile;)
Pasi të zbatohen këto stile, paragrafi do të duket kështu:

Kjo është e vërtetë për të gjitha etiketat e faqeve të internetit që përmbajnë elementet b, i dhe të mëdha. Për më tepër, b dhe i, i dhe big duhet të jenë afër; për kombinime të tjera ky rregull CSS nuk do të funksionojë. Unë mendoj se tani është e qartë për ju se si përdoren përzgjedhësit ngjitur kur shkruani ose redaktoni një dokument CSS. Një tjetër shënim shumë i rëndësishëm: nëse keni vënë re, në rastin e elementeve ngjitur, stili i specifikuar zbatohet vetëm për elementin e dytë.

Shembulli me një paragraf që u diskutua është shumë i qartë dhe ju lejon të kuptoni shpejt thelbin e përzgjedhësve ngjitur në CSS. Megjithatë, në praktikë zakonisht përdoren fusha të tjera të aplikimit të përzgjedhësve ngjitur. Për shembull, shumë shpesh është e nevojshme të përfshihet një pjesë e tekstit në trupin e një artikulli, veçanërisht të formatuar, të tilla si fusnota, shënime, etj.

Për këto qëllime, ata zakonisht krijojnë një klasë të veçantë dhe e aplikojnë atë në paragrafin e dëshiruar. Por një mënyrë shumë më optimale është përdorimi i përzgjedhësve ngjitur. Për shembull, në blogun tim ka stile të krijuara për të stiluar një kokë të rregullt h3.
H3 ( madhësia e shkronjave: 1.7em; /* Madhësia e shkronjave */ rreshtimi i tekstit: në qendër; /* Vendosja e tekstit */ pesha e shkronjave: normale; /* Pesha normale e tekstit */ familja e shkronjave: Tahoma, Arial, Helvetica, sans-serif; /* Stili i shkronjave */ ngjyra: #646464; /* Ngjyra e tekstit */ )
Për të theksuar titullin e një shënimi ose fusnote, le të përcaktojmë një klasë të veçantë, të themi vendos:
H3.put ( ngjyra: e kuqe; /* Ngjyra e tekstit */ margin-left: 5px; /* Mbushja majtas */ margin-lart: 0,5em; /* Mbushja lart */ mbushja: 10 px; /* Margjinat rreth tekstit */ rreshtimi i tekstit: majtas; /* Vendndodhja e tekstit */ )
Tani le të përdorim përzgjedhësit ngjitur për të krijuar një stil të veçantë paragrafi të shënimeve, ky paragraf do të vendoset direkt nën titull me stilin "h3.put":
H3.put+p ( sfond: #ffefd5; /* Ngjyra e sfondit */ margin-left: 15px; /* Mbushje majtas */ margin-djathtas: 120px; /* Mbushja djathtas */ margin-lart: 0,5em; /* Mbushja e sipërme */ mbushja: 5 px; /* Margjinat rreth tekstit */ )
Përsëri duke përdorur veglën e redaktimit të Google Chrome, për të cilin ju kam zënë (por ia vlen), vendosim titullin për fusnotën, duke mos harruar të vendosim klasën e vendosjes për të:

Kujdes!

Pastaj shkruajmë vetë tekstin e fusnotës:

Materialet e paraqitura në këtë botim janë shumë të rëndësishme për të mësuar bazat e CSS (Cascading Style Sheets)
.
Pas gjithë këtyre lëvizjeve, ne marrim paragrafin e mëposhtëm të shënimit në faqen e internetit (ju kujtoj se e futa këtë paragraf në fund të artikullit tim të mëparshëm për përzgjedhësit e fëmijëve dhe kontekstit):

Tani në një blog ose faqe interneti, kur lidhni klasën "put" me çdo etiketë h3, një fusnotë e tillë do të shfaqet në faqen e internetit. Për më tepër, vetëm paragrafi i parë pas etiketës h3 me "class="put" do të formatohet në një mënyrë të veçantë. Por kjo është pikërisht ajo që ne donim, apo jo?

Me këtë, më lejoni të përfundoj manualin e sotëm, në të cilin është dhënë një algoritëm për përdorimin e përzgjedhësve ngjitur dhe gjithashtu universal. Shpresoj se ky artikull do t'ju inkurajojë, të dashur lexues, të abonoheni

Në nënkapitujt e mëparshëm, ne studiuam marrëdhëniet midis etiketave në një dokument HTML, duke përfshirë shikimin e përzgjedhësve të elementeve fëmijë. Tani është koha për t'u njohur me përzgjedhësit e vëllezërve dhe motrave dhe përzgjedhësit ngjitur.

Përzgjedhës të afërt

Zgjedhësit ngjitur (të quajtur edhe përzgjedhës ngjitur) zgjedhin elementë të faqes së internetit që kanë një prind të përbashkët dhe janë ngjitur me njëri-tjetrin. Stili aplikohet në elementin e fundit të specifikuar në përzgjedhës.

Shembull: Le të themi se ju nevojitet çdo paragraf
Që vjen e para pas titullit
, kishte një font italik. Kjo mund të arrihet duke përdorur kodin CSS si ky:
H1+p (stili i shkronjave: italic; )
Kur shkruani këtë rregull, së pari duhet të specifikoni emrin e fqinjit të parë, pastaj shtoni simbolin + dhe emrin e fqinjit të dytë (ai për të cilin duam të aplikojmë stilin). Mund të krijoni kombinime më të gjata. Skema e shkrimit të përzgjedhësit është si më poshtë: përzgjedhës1+zgjedhës2+…+zgjedhësN () (stili zbatohet te përzgjedhësiN).

Shkrimi i shembujve:
/* Dhënia nga paragrafi në imazh 30 px */ p+img ( mbushje-lart: 30 px; ) /* Ngjyra e gjelbër për paragrafin që pason h3 në lidhje me h2 */ h2+h3+p (ngjyra: jeshile; )
Përzgjedhës të lidhur

Përzgjedhës të lidhur (emra të tjerë: motër, vëlla/vëlla) ju lejojnë të zgjidhni elemente të një faqeje HTML që janë të lidhura me njëri-tjetrin (d.m.th., të keni një prind të përbashkët dhe të jeni në të njëjtin nivel). Përzgjedhësit motra janë të ngjashëm me përzgjedhësit e motrave të tyre, por ndryshojnë në atë që stili zbatohet për të gjithë elementët e llojit të zgjedhur, jo vetëm për të parin. Në vend të shenjës + përdoret karakteri i tildës ~.

Shembull: le të ndryshojmë pak problemin e mëparshëm dhe imagjinojmë se duhet të bëni font italic për të gjithë paragrafët
Që vijnë pas titullit
. Kodi CSS do të duket si ky:
H1 ~ p (stili i shkronjave: italic; )
...dhe disa HTML për shembull:

Kreu 1

Kreu 2

Hidhini një sy kodit HTML: stili do të zbatohet për të gjitha etiketat
Të cilat vijojnë pas etiketë
dhe janë përpara etiketa mbyllëse e prindit
. Në versionin tonë ka 3 elementë
Në të cilën do të zbatohet stili. Ju lutemi vini re se etiketa
Kjo nuk do të dëmtojë në asnjë mënyrë. Vini re gjithashtu se në këtë rast stili nuk do të aplikuar në atë etiketë
E cila ndodhet sipër
, si dhe te etiketa
Të kesh një prind tjetër
.

konkluzionet

Duke përdorur përzgjedhësit ngjitur, ju mund të stiloni një element kur ai menjëherë pason një element tjetër (ose grup elementësh). Kjo funksionon me elementë që janë në të njëjtin nivel dhe kanë një prind të përbashkët.

Me përzgjedhësit e vëllezërve, ju mund të aplikoni një stil për të gjithë elementët e llojit të zgjedhur kur ata ndjekin menjëherë një element tjetër (ose grup elementësh). Kjo funksionon me elementë që janë në të njëjtin nivel dhe kanë një prind të përbashkët.

Artikujt më të mirë mbi këtë temë

Si të hapni redaktuesin e regjistrit të Windows

Si të vendosni përcjelljen e të gjitha letrave nga një postë në tjetrën!

Si të mbroni forumin tuaj të Simple Machines (SMF) nga mesazhet e padëshiruara