Dobro veče dragi kolege, danas ćemo proučavati još dva selektor koji se zovu dijete i susjedni css selektori. U većoj mjeri možete i bez njih, međutim, za svoj razvoj morate ih naučiti i ponekad primijeniti kako bi vam ostali u sjećanju. Stoga, raspravimo što selektori su susjedni, a koji su djeca te ćemo ih analizirati na primjeru.
Podređeni css selektori- elementi koji se nalaze unutra nadređeni element. Primjer za to mogao bi biti sljedeći. Imamo blok koji sadrži paragraf, drugi blok i sliku. Ova tri elementa su djeca. Ako postoje i drugi elementi u podređenom bloku, tada oni više nisu djeca prvog bloka, već su djeca bloka u kojem se izravno nalaze. Nadam se da ste shvatili.
Susjedski CSS selektori
- elementi koji se nalaze jedan za drugim u šifri dokumenta. Primjer za to je ovaj. Imamo odlomak i sljedeću oznaku raspon. Sve je sasvim jasno, samo treba sve sagledati na stvarnim primjerima.
Tekst u paragrafu
Tekst u rasponu
Nema više podređenog teksta u paragrafu
Koristeći stilove, dodat ćemo isti rezultat za oznaku raspon
div >span(
veličina fonta: 200%;
}
str +span(
boja : crvena;
}
Rezultat izvršavanja koda u oba slučaja bit će primijenjen na oznaku raspon, jer je dijete oznake div i sljedeći nakon oznake str. Stoga je font postao dvostruko veći i crven. Sada smo u potpunosti riješili selektori djeteta i susjeda u CSS-u, a na vama je samo da svoje znanje učvrstite u praksi, vidimo se!
CSS sintaksa je jednostavna i nije vam potreban doktorat iz IT-a da biste je razumjeli. Međutim, to je jedan od rijetkih popularnih jezika koji nije logičan u pravom smislu te riječi. Za razliku od drugih web programskih jezika kao što su JavaScript i PHP, CSS ne rješava probleme korištenjem konvencionalne logike. Algoritmi kao što su "ako X, onda uradi Y, inače uradi Z" ili "odaberi sve Y, a zatim uradi X s njima" ne mogu se implementirati u jeziku kao što je CSS. Jednostavno rečeno, to je jezik stvoren za dizajn, jezik za dizajnere, a ne za programere. Neki od iskusnih programera s kojima sam radio uložili su mnogo truda učeći svladati CSS upravo iz tog razloga.
Učenje CSS-a počinje s klasama i ID-ovima, kao i upotrebom. i # za izravno označavanje elemenata. To je dovoljno za izradu potpuno funkcionalne web stranice, ali nije dovoljno fleksibilno rješenje u slučaju potpune promjene dizajna. Pogledajmo alternativni pristup upravljanju ovim teško dostupnim predmetima.
Susjedni povezani kombinator
Počnimo sa selektorom koji je prikladan u složenim situacijama - susjednim povezanim kombinatorom. Susjedni povezani kombinator označen je povezivanjem dva elementa pomoću znaka +:H1+p
Ovo odabire sljedeći p-element koji se nalazi odmah nakon h1-elementa u DOM-u. Tipografska teorija sugerira da bismo trebali koristiti uvlake u odlomcima teksta, ali samo ako slijede drugi odlomak. U praksi se ovo može koristiti za uvlačenje svih odlomaka osim prvog:
p + p ( uvlaka teksta: 1em; )
Ovo je mnogo praktičnije od označavanja prvog odlomka pomoću class="first". Tri reda, bez klasa i puna podrška za preglednik. Ako stavite img oznake povezane sa sadržajem stranice unutar p oznaka (kao što biste zapravo trebali učiniti), možete jednostavno pomaknuti njihove lijeve margine unazad koristeći negativnu vrijednost -1em:
p + p img ( margin-lijevo: -1em; )
Prilično jednostavno, zar ne? Što ako želimo odabrati prvi redak svih odlomaka koji dolaze odmah iza naslova, a da ne mijenjamo sve ostale odlomke? Opet možemo koristiti klasu pogleda. Jednostavan selektor napravljen od susjednog složenog kombinatora i pseudo elementa će obaviti posao:
h1 + p::prvi redak ( font-varijanta: mala velika slova; )
Napomena: Pseudo-element:prvi-redak usvojen je u CSS-u 2.1, ali CSS 3 koristi notaciju:: za razlikovanje između pseudo-klasa i pseudo-elemenata.
Nasljedni kombinator
Uobičajeni protokol označavanja je postavljanje odjeljaka u neki imenovani element u #page ili #wrap:Vlad Merzhevich
Elementi web stranice nazivaju se susjednim kada neposredno slijede jedan iza drugoga u kodu dokumenta. Pogledajmo nekoliko primjera odnosa elemenata.
Lorem ipsum bol sjedi amet.
U ovom primjeru oznaka je dijete oznake
Jer je unutar ovog spremnika. Odnosno
Ponaša se kao roditelj .
Lorem ipsum bol sjediti amet.
Evo oznaka I nikako se ne preklapaju i predstavljaju susjedni elementi. Činjenica da se nalaze unutar kontejnera Uopće ne utječe na njihov stav. Lorem ipsum dolor sit amet, consectetuer adipiscing elita.
Ovdje su susjedne oznake I , i I . pri čemu I susjedni elementi se ne tretiraju jer se između njih nalazi spremnik .
Za kontrolu stila susjednih elemenata upotrijebite simbol plus (+) između dva birača. Opća sintaksa je sljedeća.
Selektor 1 + Selektor 2 (opis pravila stila)
Razmaci oko plusa nisu obavezni; stil u ovoj oznaci primjenjuje se na Selector 2, ali samo ako se nalazi uz Selector 1 i odmah slijedi nakon njega.
Primjer 11.1 pokazuje strukturu međusobne interakcije oznaka.
Primjer 11.1. Korištenje susjednih selektora
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipisciona elita.
Lorem ipsum dolor sit amet, consectetuer adipisciona elita.
Rezultat primjera prikazan je na sl. 11.1.
Riža. 11.1. Označavanje teksta bojom pomoću susjednih selektora
Ovaj primjer mijenja boju teksta za sadržaj spremnika kada se nalazi odmah iza kontejnera . U prvom paragrafu ova situacija je implementirana, tako da je riječ “consectetuer” prikazana crvenom bojom u pregledniku. U drugom odlomku, iako postoji oznaka , ali nema oznake u susjedstvu ne, tako da se stil ne primjenjuje na ovaj spremnik.
Pogledajmo praktičniji primjer. Često postaje potrebno uključiti razne fusnote i bilješke u tekst članka. Obično se nova klasa stila stvara za ovu svrhu i primjenjuje na odlomak; na taj način možete jednostavno promijeniti izgled teksta. Ali mi ćemo ići drugim putem i koristiti susjedne selektore. Kako bismo istaknuli komentare, stvorimo novu klasu, nazovimo je sic i primijenimo je na oznaku
. Prvi odlomak nakon takvog naslova istaknut je pozadinskom bojom i uvlakom (primjer 11.2). Izgled preostalih odlomaka ostat će nepromijenjen.
Primjer 11.2. Promjena stila odlomka
HTML5 CSS 2.1 IE Cr Op Sa Fx
Metode hvatanja lava u pustinji
Metoda sekvencijalnog pretraživanja
Neka lav ima ukupne dimenzije D x Š x V, gdje je L duljina lava od vrha nosa do vrha repa, W je širina lava, a H je njegova visina. Nakon toga pustinju podijelimo na nekoliko elementarnih pravokutnika čija veličina odgovara širini i duljini lava. S obzirom na to da se lav ne može nalaziti striktno u određenom prostoru, već istovremeno u dva, kavez za hvatanje trebao bi biti veće površine, i to 2L x 2W. Zahvaljujući tome izbjeći ćemo pogrešku da u kavezu bude uhvaćena samo polovica lava ili, još gore, samo njegov rep.
Važna nota
Radi pojednostavljenja izračuna, rep se može odbaciti i ne uzeti u obzir kao greška mjerenja.
Rezultat ovog primjera prikazan je na sl. 11.2.
Riža. 11.2. Promjena izgleda odlomka korištenjem susjednih selektora
U ovom primjeru, tekst je oblikovan pomoću odlomaka (tag
), ali pisanje H2.sic + P postavlja stil samo za prvi odlomak nakon oznake
, kojoj je dodana klasa pod nazivom sic.
Susjedni birači prikladni su za korištenje za one oznake kojima se automatski dodaju uvlake kako bi se neovisno prilagodila količina uvlake. Na primjer, ako postoje oznake u nizu
I , tada se udaljenost između njih može lako prilagoditi pomoću susjednih selektora. Slična je situacija za uzastopne oznake. I
I
I u drugim sličnim slučajevima. Primjer 11.3 mijenja količinu prostora između navedenih oznaka na ovaj način.
Primjer 11.3. Razmaci između naslova i teksta
HTML5 CSS 2.1 IE Cr Op Sa Fx
Naslov 1
Naslov 2
Paragraf!
Budući da se pri korištenju susjednih selektora stil primjenjuje samo na drugi element, veličina margina smanjena je uključivanjem negativne vrijednosti za svojstvo margin-top. U ovom slučaju, tekst se diže prema gore, bliže prethodnom elementu.
Pitanja za provjeru
1. Koje su oznake u ovom kodu susjedne?
Formula sumporne kiseline:H 2 TAKO 4
I
- I
- I
- I
- I
2. Dostupan je sljedeći HTML kod:
Fermatov posljednji teorem
x n+Y n
= Z n
gdje je n cijeli broj > 2
Koji će tekst biti označen crvenom bojom SUP + SUP ( boja: crvena; ) stilom?
- Drugo "n"
- Drugi i treći "n".
Nasuprot tome, susjedni se koriste rjeđe. Glavna razlika je u tome što moraju slijediti druge. Kako biste lakše razumjeli ovu temu, predlažem da pogledate ovu strukturu:
<тег1> <тег2> <тег3> <тег4> <тег5><тег6>...
Kao što ste vjerojatno pogodili iz prethodne lekcije, oznake 2, 3, 4, 5, 6 su selektori konteksta za oznaka1. S druge strane, susjedni selektori će biti: tag2 i tag3, tag4 i tag5, Ali u isto vrijeme oznaka2 I oznaka4 nisu susjedni. Svojstva stila primijenit će se na posljednji element koji navedete kao susjedni. Samo treba slijediti redoslijed izbornika. Opća sintaksa pisanja je:
Selektor1 + selektor2+ ...+selektorN ( svojstvo1: vrijednost; svojstvo2: vrijednost; ... svojstvoN: vrijednost)
Pogledajmo ovaj primjer:
Naslov
Označiti str je susjedni selektor oznake h1
