Svetainės teksto ir turinio išdėstymas su HTML kodu yra tik vienas „pastatas“ tinklalapio galą. Dar viena didelė šio proceso dalis yra vizualinio stiliaus, kurį valdo, kūrimas CSS taisykles.
Kiekvieną kartą kurdami naują svetainę ar keisdami esamos svetainės išdėstymą, neišvengiamai norime, kad tam tikros mūsų svetainės dalys atrodytų tam tikru būdu. Norėdami tai padaryti, svarbu suprasti, kaip naudoti įvairius CSS kombinatoriai, pavyzdžiui, CSS palikuonių selektorius. Šis CSS kombinatorius leidžia didelėms svetainės skiltims iškart gauti tuos pačius stiliaus pakeitimus.
Kas yra CSS palikuonių parinkėjas?
CSS palikuonių selektorius yra vienas iš keturių skirtingų CSS kombinatorių. Pridėjus vieną tarpą () tarp dviejų selektorių, tie patys stiliaus elementai bus taikomi ir antrajam selektoriui, atsižvelgiant į tai, kad palikuonys turi tą patį pirmąjį selektorių.
Norėdami suprasti CSS palikuonių selektorių, pirmiausia turite tai padaryti suprasti CSS pasirinkėjus. Geriausias būdas apibūdinti selektorių yra tai, kad CSS operatorius identifikuoja HTML fragmentą, kurį bandote stilizuoti. Jis vadinamas selektoriumi, nes jis „pasirenka“ bet kokį HTML bitą, kuris naudojasi tuo pačiu operatoriumi kaip ir CSS pagrindinis.
Dažni tokių operatorių pavyzdžiai:
div
Tai žymė, apibrėžianti HTML sekciją, kurioje gali būti tokie punktai ir turinys arba:
li
kuris yra sutvarkytas sąrašas. Kita panaši žyma yra:
ul
Tai sukuria neužsakytą sąrašą. Sudėtingesni modeliai taip pat vadinami selektoriais. Paprasčiau tariant, CSS palikuonių selektorius tinklalapiui nurodo, kaip atrodyti, kai vienas selektorius yra „įdėtas“ po bendru protėviu.
Pirmasis selektorius tampa CSS tėvu arba „protėvių“ selektoriumi, o antrasis - palikuoniu. Pagalvokite, kaip veikia failų katalogas: CSS pagrindinis yra tarsi aplankas, kuriame yra kitų aplankų, kuriuose gali būti jų pačių aplankai.
Iš keturių kombinatorių vienintelis pasirenka viską, kas įdėta po konkrečiu CSS tėvu, yra CSS palikuonių selektorius. Yra dar trys kombinatoriai.
- Vaiko parinkiklis (‘>’ vietoj vieno tarpo) parenka tik tuos elementus, į kuriuos kreipiasi pirmasis kombinatoriaus selektorius. Jei pirmasis parinkiklis yra (div), o antrasis yra (p), pasirenkamas tik (p) tol, kol jis turi (div) kaip protėvį. Jei pastraipa sukurta pagal naują (skyrių), net jei ji yra toje pačioje (div), stiliaus taisyklės nesilaikomos.
- Gretimas brolių ir seserų selektorius („+“ vietoj vieno tarpo) parenka tik tą elementą, kuris yra arčiausiai antrojo kombinatoriaus parinkiklio. Jei pirmasis parinkiklis yra (div), o antrasis yra (p), pasirenkamas pirmasis elementas, kuris naudoja (p), bet ne (div).
- Bendrasis brolių ir seserų selektorius („~“ vietoj vieno tarpo) parenka kiekvieną elementą, išskyrus tuos, kuriuos nurodo antrasis selektorius. Jei pirmasis parinkiklis yra (div), o antrasis yra (p), pasirenkami visi elementai, kurie nėra (p).
Kaip atrodo CSS palikuonių selektorius?
Toliau pateiktame dviejų skirtingų CSS palikuonių selektorių, veikiančių greta, pavyzdyje (div) yra pirmasis selektorius pirmame kombinatoriuje, o (ul) yra pirmasis selektorius antrame kombinatorius. Abiejuose CSS palikuonių selektoriuose (p) naudojamas kaip antrasis selektorius.
Stiliaus elementai skiriasi tarp (div) ir (ul), tačiau (p) abiem atvejais aiškiai turi savo CSS tėvų bruožus.
Kodėl verta naudoti CSS palikuonių selektorių?
Norint suprasti CSS palikuonių selektoriaus svarbą, pirmiausia verta suprasti CSS įdėtus selektorius.
Paprastai norime, kad tam tikros stiliaus taisyklės būtų taikomos visoje svetainėje, pvz., Konkretaus dydžio ar šrifto, kurį pagal pastraipą naudoja visas pastraipos (p) tekstas. Taip pat HTML gali atrodyti netvarkingas, jei šios stiliaus taisyklės bus taikomos kiekvienai atskirai pastraipai, o ne visai svetainei.
Įdėta CSS yra įmanoma naudojant CSS kombinatorius, tokius kaip CSS palikuonių selektorius. „Lizdą“ sukūrus CSS po tėvų parinkikliu, galima greitai ir efektyviai pasakyti svetainei kaip turėtų atrodyti konkretus selektorius kiekviename scenarijuje, apie kurį kalbama apie CSS tėvą.
Naudodami įdėtą CSS selektorių, mes galime pritaikyti tas pačias taisykles, kad vienu metu sukurtumėte kelias svetainės dalis, leidžiant mums išsiversti su mažiau darbo, tuo pačiu išlaikant HTML švarą ir nepaliestą.