Vietnes teksta un satura izkārtojums ar HTML kodu ir tikai viena ēkas daļa vietnes sākums. Vēl viens liels šī procesa gabals ir vizuālā stila radīšana, kuru pārvalda CSS noteikumiem.
Ikreiz, kad mēs izveidojam jaunu vietni vai veicam būtiskas izmaiņas esošā izkārtojumā, mēs neizbēgami vēlamies, lai konkrētas mūsu vietnes daļas izskatās noteiktā veidā. Lai to izdarītu, ir svarīgi saprast, kā izmantot dažādus CSS kombinatori, piemēram, CSS pēcnācēju selektors. Šis CSS kombinators ļauj lielām vietnes sadaļām vienlaikus saņemt vienādas stila izmaiņas.
Kas ir CSS pēcnācēju atlasītājs?
CSS pēcnācēju selektors ir viens no četriem dažādiem CSS kombinatoriem. Pievienojot vienu atstarpi () starp diviem atlasītājiem, tie paši stila elementi attieksies arī uz otro atlasītāju, ņemot vērā, ka pēcnācējiem ir viens un tas pats pirmais atlasītājs.
Lai saprastu CSS pēcnācēju selektoru, jums tas vispirms ir nepieciešams saprast CSS atlasītājus. Labākais veids, kā aprakstīt selektoru, ir tas, ka tas ir CSS operators, kas identificē HTML fragmentu, kuru mēģināt ieveidot. To sauc par atlasītāju, jo tas “atlasa” jebkuru HTML daļu, kuram ir tāds pats operators kā CSS vecākam.
Parasti šādu operatoru piemēri ir:
div
Šis ir tags, kas definē HTML sadaļu, kas var ietvert, piemēram, rindkopas un saturu, vai:
li
kas ir sakārtots saraksts. Vēl viena līdzīga atzīme ir:
ul
Tādējādi tiek izveidots nesakārtots saraksts. Sarežģītākus modeļus sauc arī par selektoriem. Vienkāršāk sakot, CSS pēcnācēju atlasītājs vietnei norāda, kā izskatīties, ja viens atlasītājs tiek “ligzdots” zem kopīga priekšteča.
Pirmais atlasītājs kļūst par CSS vecāku vai ‘priekšteča’ selektoru, un otrais atlasītājs kļūst par pēcnācēju. Padomājiet par to, kā darbojas failu katalogs: CSS vecāks ir kā mape, kurā ir citas mapes, kurās var būt savas mapes.
No četriem kombinatoriem vienīgais, kas atlasa visu, kas ir ligzdots zem konkrēta CSS vecāka, ir CSS pēcnācēju atlasītājs. Ir vēl trīs kombinatori.
- Bērnu atlasītājs (‘>’, nevis vienas atstarpes) atlasa tikai tos elementus, uz kuriem kombinatorā norāda pirmais atlasītājs. Ja pirmais atlasītājs ir (div) un otrais selektors ir (p), tiek izvēlēts tikai (p), kamēr tam ir priekšnieks (div). Ja rindkopa tiek izveidota zem jauna (sadaļa), pat ja tā atrodas tajā pašā (div), stila noteikumi netiek paturēti.
- Blakus esošais brāļu un māsu atlasītājs (“+”, nevis vienas atstarpes) atlasa tikai to elementu, kas ir vistuvāk kombinatora otrajam atlasītājam. Ja pirmais atlasītājs ir (div) un otrais ir (p), tiek izvēlēts pirmais elements, kas izmanto (p), bet neizmanto (div).
- Vispārīgais brāļu un māsu atlasītājs (‘~’, nevis vienas atstarpes) izvēlas visus elementus, izņemot tos, uz kuriem atsaucas otrais atlasītājs. Ja pirmais atlasītājs ir (div) un otrais ir (p), tiek atlasīti visi elementi, kas nav (p).
Kā izskatās CSS pēcnācēju selektors?
Nākamajā divu dažādu CSS pēcnācēju atlasītāju piemērā, kas darbojas blakus, (div) ir pirmais selektors pirmajā kombinatorā, savukārt (ul) ir pirmais selektors otrajā kombinators. Abos CSS pēcnācēju selektoros (p) tiek izmantots kā otrais selektors.
Stila elementi atšķiras starp (div) un (ul), taču (p) abos gadījumos nepārprotami piemīt sava CSS vecāka iezīmes.
Kāpēc izmantot CSS pēcnācēju atlasītāju?
Lai saprastu CSS pēcnācēju atlasītāja nozīmi, ir vērts vispirms izprast CSS ligzdotos atlasītājus.
Mēs parasti vēlamies, lai visai vietnei tiktu piemēroti noteikti stila noteikumi, piemēram, konkrēts lielums vai fonts, ko pēc noklusējuma izmanto visa rindkopas (p) teksts. Tāpat HTML var sākt izskatīties netīrs, ja šie stila noteikumi tiek piemēroti katrai atsevišķai rindkopai, nevis visai vietnei.
Ligzdota CSS ir iespējama, izmantojot CSS kombinatorus, piemēram, CSS pēcnācēju atlasītāju. “Ligzdojot” CSS zem vecāku atlasītāja, ir iespējams ātri un efektīvi pateikt vietnei kā jāizskatās konkrētam atlasītājam katrā scenārijā, uz kuru atsaucas CSS vecāks.
Izmantojot ligzdotu CSS selektoru, mēs varam piemērot vienus un tos pašus noteikumus vairāku vietnes sadaļu stilam vienlaikus, ļaujot mums iztikt ar mazāk darba, vienlaikus saglabājot HTML tīru un neskartu.