Tere, kallid lugejad! Objekti CSS-valikute jätkamine Ma tahan teile pakkuda tütarettevõtete ja kontekstuaalsete valikute kirjeldus, samuti nende võrdleva analüüsi, sest vastavalt taotluse loogikale on need väga sarnased, kuigi neil on mõningane erinevus.

Minu väljaannetes jäin ma üksikasjalikult erinevaid CSS-valikuid:; sama hästi kui . Muide, viimases artiklis, kus erinevad atribuutide valiku tüübid demonteerisid üksikasjalikult üksikasjalikult, kuidas mu teoreetilisi arvutusi saab kohe kontrollida, tehes HTML-i ja CSS-koodi muutmisega võrgus sisseehitatud Google Chrome'i () tööriist. Sellistel redigeerimisvahenditel on kõik populaarsete brauserite uusimad modifikatsioonid, sealhulgas Firefoxi jaoks Firefoxi plugin ().

Selle postituse teoreetilist materjali saab uurida ka mis tahes saidi mis tahes lehe redigeerimise abil! Selleks vajutage lihtsalt F12, kui kasutate Google Chrome'i või Mozilla Firefoxi (). Ja nüüd ma esitan P-märgise sisu, mille näitel me õpime kog- ja kontekstuaalse CSS valikuid:

Käesolev lõige sisaldab em ja tugevad vormindamise sildidmis eraldavad teksti rasva ja kald-.

Kasutades ülalkirjeldatud redigeerimisvahendit, lisasin selle lõike otse käesolevale artiklile, hindasin akna vasakul asuvasse teksti vastava teksti redigeerimiseks, mille tulemusena ilmus selle punkti tekst lehe ülaosas:

See HTML-disain ,. Käesolev lõige on tänapäeva väljaandes eksperimentaalne, tema eeskujul näitab, kuidas tema teksti kujundamine muutub sõltuvalt sellest, milliseid valikuid - Child või kontekstuaalne - kasutatakse CSS-i reeglis.

Tütar nimetatakse elemendiks, mis asub otse vanema sees. Enne kui menetlus otse teemale, annan ma pildi, mis peegeldab HTML-dokumendi sildi hierarhiat lõike näites, mille tekst on ülaltoodud ja mida me täna lahti võtame:

Seda disaini nimetatakse ka elementide puudeks. Selles arvul on pesitsemismahutid selgelt esindatud, mis tähendab silte hierarhilisi suhteid. Punkt P Silt on tütarettevõtja element. Samal ajal ei ole tugev tag digi tütarettevõtja, kuna see sõitis P-mahutisse.

Tütarettevõte CSS valija

Lapse valija elementide puu puul on alati vanemosa sees otseselt, sel juhul on CSS-valiku kirjutamise süntaks järgmine:

Stiilit rakendatakse valikule 2, kuid ainult siis, kui see on valija laps 1. Analüüsime üksikasjalikumalt ülaltoodud ekraanipildiga elementide puuga. Näiteks pärast süntaksi järgi saate selle reegli seadistada:

P\u003e Em (värv: roheline;)

See reegel mõjutab viimast sõna lõiget "kaldkirjas", kuna see on sõlmitud EM-i avamis- ja sulgemismärkide vahel. EM-s tag on tütarettevõte P, sest see asetatakse otse selle sees, seega sisu teksti, nimelt sõna "kaldkirjas" värvitakse rohelisena.

Teine EM-s tag ei \u200b\u200btähenda siiski P-sildi otsest järeltulijana, kuna see on osa tugevast sildist, mille tulemusena ei ole värvitud osa lõikest "Forming Sildid Em ja tugevad".

Kontekstuaalne CSS valija

See on järjekord välja selgitada mis on kontekstuaalne CSS valija. Ühe või teise saidi lehekülje paigaldamisel väga tihti investeeritakse sildid ühte teise. Selleks, et stiilid selliste elementide töötamiseks õigesti, valikuid kasutatakse, mis tegutsevad mõnes kontekstis, seega nimi.

Kui selleks, et CSS-i reegel rakendataks, peab lapse valija asuma otse vanemosa sees (esimene pesitseva tase) sees, siis kontekstivalija jaoks on see täiesti ebaoluline ja ükskõik milline pesade tase võib rakendada, kõik Edasised omadused elemendi kantakse vanemast. Samal ajal on süntaks:

Nagu näete, koosneb kontekstuaalne valija lihtsa valikuga, mis on eraldatud ruumis. Sest kontekstuaalsete valikute puhul on lubatud kasutada teineteisesse kahte ja rohkem silte. Nüüd teeme CSS-reegli katsepunkti jaoks, mida ma eespool viidatud:

P EM (värv: roheline);)

Nagu näete, on roheline mitte ainult lõike sisu tekst, mis on otseselt sõlmitud EM-i vormindamismärgis, st sõna "kaldkirjas", vaid ka teise EM-tag teksti teksti tekst, mis Sisaldab ka tugevat sildi. See juhtus, sest see rakendab reeglit kontekstivalijaga, mille jaoks pesitsustase ei ole vastuolus tütarettevõtja vastu. See on peamine erinevus tütarettevõtte ja kontekstuaalse valiku vahel.

Kaaluge teist näidet konteksti- ja lapse valijate koostoimest meie lõikega. Järgmiste CSS-i eeskirjade koostamine tütarettevõtte ja konteksti valija jaoks:

Div em (värv: punane;) p\u003e em (värv: roheline;)

Pärast seda omandab meie lõige sellise disainilahenduse:

Nagu näete, on EM- ja tugevad silte ümbritsetud tekst punases tekst, sest see on õiglane konteksti valija reegel, st EM-s tag on sõlmitud tugevates ja div konteinerites ja pesade tasemel Nagu juba märgitud, ei ole oluline.

Küsimus tekib: miks on sõna "kaldkirjas", mis on ka EM-i sisu, värvitud roheliseks? Lõppude lõpuks ja tema jaoks on see kontekstuaalne valiku reegel asjakohane. Kuid lõike teksti osa jaoks on tütarvalija reegel ka tõsi, sest see ei ole vastuolus lapse valiku seisundiga, et element peaks otse sildi P.

Fakt on, et CSS-il on allpool esitatud CSS-i omaduste prioriteetne seadus. See tähendab, et sel juhul on tütarvaliku reegel allolevas dokumendis kui CSS-st stiilid, mis on ette nähtud DIV konteineri kontekstivalijale. Seetõttu sai sõna "kaldkirjas" roheliseks. Kui muudate neid mõnes kohas, reegel "p\u003e em (värv: roheline;)" Lõpetab toimingu ja teksti tekst "Kaldkirjas" on punane.

Kirjeldus

Pseudo-klassi: NTH-Childi kasutatakse stiili lisamiseks elementidele, mis põhinevad elementidel puu.

Süntaks

element: NTH-laps (paaritu | Isegi |<число> | <выражение>) {...}

Väärtused

Odd kõik paaritu elementide numbrid. Isegi kõik isegi elementide arv. Lapseelemendijärjestuse arvu number oma vanema suhtes. Numeratsioon algab 1-ga, see on loendi esimene element. Väljend on seatud vormis A + B, kus A ja B täisarvud ja n - counter, mis võtab automaatselt väärtus 0, 1, 2 ...

Kui A on , ei ole see kirjutatud ja rekord vähendatakse b. Kui B on , see ei ole ka täpsustatud ja väljend on kirjutatud kujul. A ja B võivad olla negatiivsed numbrid, sel juhul plussmärgi muutused miinus, näiteks: 5N-1.

Tänu negatiivsete väärtuste A ja B kasutamise tõttu võivad mõned tulemused olla negatiivsed või võrdsed nulliga. Kuid ainult positiivsed väärtused mõjutavad elemente, kuna elementide numeratsioon algab 1-ga.

Vahekaardil. 1 kujutab mõningaid võimalikke väljendeid ja märksõnu ning täpsustatud, millised elementide arv on kaasatud.

HTML5 CSS3 IE CR OP SA FX

	2134	2135	2136	2137	2138
Õli	16	34	62	74	57
Kulla	4	69	72	56	47
Puit	7	73	79	34	86
Kivi	23	34	88	53	103

Selles näites kasutatakse pseudo-klassi: nth-last tabeli esimese rea stiili muutmiseks ning rõhutada kõigi isegi ridade värvi (joonis 1).

Viimati uuendatud: 04/21/2016

Pseudoklasside erirühm moodustavad pseudoklasassid, mis võimaldavad teil valida teatud lasteelemendid:

: Esimene laps: esindab elementi, mis on esimene lapseelement

: Viimane laps: esindab toodet, mis on viimane lapseelement

: Ainult laps: esindab elementi, mis on mõnes konteineris ainus tütarettevõte

: Ainult-of-tüüp: valib üksuse, mis on teatud tüüpi (sildi) ainus element mõnes konteineris

: NTH-laps (n): kujutab endast lapseelementi, millel on konkreetne N number, näiteks teine \u200b\u200blapse element

: NH-Last-Child (N): esitab lapselemendi, millel on konkreetne N number, alustades lõpust

: NK-tüüpi-tüüpi (N): valib teatud tüüpi lasteelemendi, millel on konkreetne number

: NH-LAST-OF-tüüpi (N): valib teatud tüüpi lapse elemendi, millel on konkreetne number alates lõpust

Pseudo klassi esimene laps

Me kasutame esimese lapse pseudoklasaasi, et valida esimesed lingid plokkides:

Tabletid

Nutitelefonid

Selector Style A: Esimene laps kehtib lingi suhtes, kui see on esimese elemendi esimene lapseelement.

Ja teises plokis on esimene element lõik, nii et stiil ei kehti mis tahes lingi suhtes.

Pseudolass Last-Child

Me kasutame pseudolass viimase lapse:

Nutitelefonid

Tabletid

Selector a: Viimane laps määrab stiili viiteid, mis on viimased tütar elemendid.

Esimeses plokis on vaid viimane tütarettevõte link. Kuid teises viimases lapseelemendis on lõige, nii et teises plokis ei kehti stiil ühegi lingil.

Ainult lapse valija

Valija: Ainult lapse valib elemente, mis on ainsad tütre elemendid konteinerites:

Pealkiri

Tekstide tekstidega "Text1" ja "Text4" punktid on ainsad välismahutites lapse elemendid, nii et stiil on rakendatud neile - punane font.

Pseudo-klassi ainult-of-tüüpi

Pseudo-klassi ainult-tüüpi valib elemendi, mis on ainus element konkreetse tüüpi konteinerisse. Näiteks ainus div element, mille elemendid teiste tüüpide samas konteineris võib olla nii palju kui soovite.

Ainus lõige ja keerutatud element

Kuigi stiil on DIV-elementide jaoks määratletud, ei rakendata seda, kuna keha konteiner sisaldab kahte div elementi ja mitte ühte. Aga kehas on ainult üks element P, nii et see saab stilist. Ja ka konteineris p on ainult üks span element, nii et see on ka stiliseeritud.

NTH-lapse pseudo klass

NTH-Child Pseudo klass võimaldab teil stiilida iga teine, kolmas element, ainult isegi paaritu esemed jne.

Näiteks stiilis isegi ja paaritu lauajooned:

Nutitelefonid

Samsung	Galaxy S7 serv	60000
Õun	iPhone SE	39000
Microsoft.	Lumia 650.	13500
Alcatel.	Idol S4.	30000
Huawei.	P9	60000
Htc	HTC 10.	50000
Meizu.	Pro 6.	40000
Xiaomi.	Mi5.	35000

Odd esemete stiili määramiseks edastatakse valija "paaritu":

Tr: nth-laps (paaritu) ()

Valija elementide stiilis edastatakse väärtus "isegi":

Tr: nth-laps (isegi) ()

Ka selles valikus saame edastada stiliseeritud elemendi numbri:

TR: nth-laps (3) (taustvärv: #bbb;)

Sellisel juhul on kolmas rida stiliseeritud.

Teine võimalus on asendaja kasutamine number, mida väljendatakse tähega N:

Tr: nth-laps (2N + 1) (taustvärv: #bbb;)

Siin rakendatakse stiili iga teise paaritu stringile.

N (sel juhul 2) ees olev number esindab lapselementi, mis eraldatakse järgmiselt. Arvu, mis tuleb pärast plussmärki kuvatakse, kust element peate valiku alustama, st +1 tähendab, et peate alustama esimesest lapseelemendist.

Seega sel juhul algab valiku 1. elemendiga ja järgnevalt vabastatakse 2 * 1 + 1 \u003d 3. element, edaspidi 2 * 2 + 1 \u003d 5. element ja nii edasi.

Näiteks, kui tahame eraldada iga kolmas element, alustades teisest, võiksime kirjutada:

TR: NTH-laps (3N + 2) (taustvärv: #bbb;)

Pseudo-klassi: NTH-Last-Child pakub sisuliselt sama funktsionaalsust, vaid elementide loendur ei ole algusest peale, vaid lõpust:

TR: NTH-Last-Child (2) (taustvärv: #bbb; / * 2 rida lõpust, st eelviimane * /) TR: NH-Last-Child (2N + 1) (taustvärv) : #eee; / * paaritu liinid, alates lõpust * /)

Nh-of-tüüpi pseudo klass

Pseudo-klassi: NTH-OF-tüüpi võimaldab teil valida teatud numbri lapse elemendi:

TR: NTH-OF-tüüpi (2) (taustvärv: #bbb;)

Samamoodi on NH-Last-of-tüüpi pseudo klassi töötab, vaid nüüd elementide loenduskonda lõppu:

TR: NTH-LAST-OF-TYPE (2N) (taustvärv: #bbb;)

Ma arvan, et paljud teavad kontekstuaalsed valikud CSS-is. Neid kasutatakse kõige sagedamini, kuid kogenud kaamerameen teavad suurepäraselt hästi, et mõnikord kontekstuaalseid valikuid teevad teatud probleeme. See probleem on seotud asjaoluga, et elemendi struktuuris võib olla palju identseid elemente üksteisele sisseehitatud. Ja see on vaja rakendada stiili mitte kõigi pesastatud elementide jaoks, vaid ainult otsesele elemendile otse. Siin selle ja kasutatud jaoks tütar-valikuid CSS-is.

Nii et probleem muutub arusaadavamaks, anname väikese näite. Olgem selline HTML-kood:

Ja meie ülesanne on teha punast ainult " Teine lõik"Kui me kirjutame kontekstivalija abil:

Konteiner P (
Värv: punane;
}

Et me muutume punast nii lõigetes, mida me üldse ei vaja. See ülesanne on lihtsalt lihtsalt lahendada tütar-valikuid CSS-is:

Konteinerit\u003e P (
Värv: punane;
}

Kõik, nüüd oleme muutunud ainult punaseks " Teine lõik". Kuna see punkt on otseselt tütarettevõtja .Container. AGA " Esimene lõik"Kas tütarettevõte sisemine divSeega ei lange lapsevalija hagi all.

See ülesanne on nii lihtne lahendada, aga on olemas üks suur miinus tütar-valikuid CSS-is - Nad ei tööta brauserites Internet Explorer.. Sel põhjusel on nende kasutamine äärmiselt ebasoovitav. Aga kui sa äkki kohtuvad kusagil, siis nüüd teate, mida seda tüüpi valikuid tähendab ja mida ta teeb.

Selle valiku peamine ülesanne tuleneb selle nimest ja seisneb lapse elemendi kasutamisest. Elementaarse märgi abil kuvatakse "\u003e" abil, mis seob lapsevanema elemendiga. Samuti väärib märkimist, et ringluses kasutatakse lihtsaid valijaid. Näiteks kaaluge järgmist kodeeringut:

Element\u003e UL (Padding- Top: 20px;)

See kodeering tähendab, et elementi investeeritud loendile rakendatakse ülemise serva 20 piksli sisemist taandumist ülemisest servast. Olemasolu selles kirje ikoonil "\u003e" näitab, et reegel kehtib ainult nimekirjade nimekirjade pesitsus.

Lapseelemendi töövaliku üksikasjalik analüüs

Lapse elemendi valijal on sarnane omadused järgneva valiku kontseptsiooniga. Siiski on iseloomulik omadus, mis näitab nende toimingute peamist erinevust. See peitub asjaolu, et järgneva valiku mõju ulatub absoluutselt kõigile elementidele, samas kui lapse valija allub klassifikatsioonide esimese taseme asukoha stiilid.

Erimseisulisem hindan täiendav operaatori töö aitab järgmist näidet:

Div\u003e R (värv: # ff0000; / * punane * /)

< div> See stringil on vaikimisi must tekst.< span> See rida värvitakse punaselt, kuna p on Diva tütre tag. < p> Jällegi näeme mustad tähed.< span> Siin näeme ka mustad tähemärgid, sest selle ajavahemikuks on vanem sildi.

See näide kinnitab täiendava ettevõtja tööd vastavalt pesitsemise tasemele.

Tellija kohaldamise piiramine

Väärib märkimist, et seda operatsiooni toetavad kõik muud brauserid, välja arvatud legendaarne Internet Explorer 6. Ma arvan, et seda brauserit kasutavad vähe inimesi, kuid kui sellised unusmid on kättesaadavad, siis on nende jaoks väljapääs olukorrast kirjeldatakse eraldi artiklis.

Miks rakendada

Programmeerijad viitavad lasteelementide valikutele, kui teil on vaja määrata oma unikaalse stiili pesastatud elementidega. Samuti võib selle valiku kasutamine vähendada CSS-mahtu, mis suurendab dokumendi loetavust. Nagu praktika näitab, seda toimingut on kõige sagedamini viidatud luues rippmenüüd.

Lapseelemendi valijat kasutatakse ka unikaalsete stiilide määramiseks elementidele, mille vanemad on varem juba tuntud. Teisisõnu:

Main\u003e Päise ( / * Registreerimine kehtib ainult peamise heter * / }

See näide on õiglane juhtudel, kui päise tag kasutatakse artiklite pealkirjade esiletõstmiseks. Meie puhul küsime disaini ainult peamist heter ja ärge tehke sekundaarset. See tehnika väldib ka pikendamise identifikaatorite kasutamist, mis omakorda hõlbustab CSS-faili kaal ja muudab selle loetavamaks.

Summeerida

Seega võib tütarettevõtja rakendada mitte ainult rippmenüüde disaini jaoks, vaid ka teie Interneti-ressursi väikese optimeerimise jaoks otsingu robotide tööle.