Tá struchtúr doiciméad HTML cosúil le crann teaghlaigh. I do theaghlach, tá do thuismitheoirí agus daoine eile a tháinig os comhair tú. Seo iad do shinsearaithe. Is iad na leanaí agus na daoine a thagann tar éis duit ar an gcrann sin ná do shliocht. Oibríonn HTML ar bhealach den chineál céanna. Is iad na heilimintí atá taobh istigh d'eilimintí eile a sliocht. Mar shampla, ós rud é go bhfuil beagnach gach eilimint HTML taobh istigh de
tags, bheadh siad ina shliocht de na heilimintí sin. Tá an gaol seo tábhachtach a thuiscint nuair a thosaíonn tú ag obair le CSS agus ní mór dó díriú ar eilimintí sonracha chun stíleanna amhairc a chur i bhfeidhm.Roghnóirí Dífhostaigh CSS
Baineann roghnóir seoltóir CSS leis na heilimintí atá taobh istigh de eilimint eile (nó níos mó a luaitear go cruinn, eilimint atá ina shliocht de eilimint eile). Mar shampla, tá tag ag liosta neamhordaithe le clibeanna mar shliocht. Úsáidimid an HTML seo a leanas mar shampla:
- is nasc é seo li> ul>
Is iad na clibeanna LI sliocht an chlib OL. Is sliocht é an tag A de na clibeanna LI (sliocht an linbh) agus clibeanna OL (sliocht uaisleacha) araon. Má cheapann tú smaoineamh ar seo ag baint úsáide as an gcrann teaghlaigh, is é an
- an tuismitheoir, ba é an
- leanbh an eilimint sin, agus gurb é an leanbh an
- agus an ogha de an
- .
- ). Ní bhfáilfeadh an stíl seo le gach nasc eile ar an leathanach nach bhfuil ina shliocht de mhír liosta.
Mar sin, conas a dhíreofaí tú ar eilimintí sonracha i leathanach gréasáin ag baint úsáide as na roghnóirí sliocht seo? Ar dtús, caithfidh tú roghnóirí sliocht a shainiú trí dhá roghnóir cineál (nó níos mó) de chineál a scartha le spásanna.
li {{maisiú téacs: none; }Sa sampla sin, ní bheadh feidhm ag na stíleanna ach amháin le heilimint nasc () atá ina shliocht d'eilimint liosta-liosta (
Rud is tábhachtaí le cuimhneamh ná nach cuma cé mhéid clibeanna atá idir na clibeanna a d'fhéadfá a úsáid i do roghnóir sliocht. Má tá an dara eilimint iniata in áit ar bith laistigh den chéad eilimint, roghnófar é mar shliocht.
Má theastaíonn uait gach ancaire a roghnaíodh ó eilimintí ul a roghnú, scríobhfeadh tú:
ul a {text-decoration: none; }Anois, beidh na stíleanna seo i bhfeidhm ar aon nasc atá ina shliocht de mhír liosta. D'fhéadfá an roghnóir seo a scríobh freisin
ul li {text-decoration: none; }Is roghnóir sliocht é seo a úsáideann níos mó ná dhá rogha de chineál. Sa chás seo, bheadh feidhm aige seo maidir le naisc atá taobh istigh de mar mhír liosta agus taobh istigh de liosta neamhordaithe.
Ag baint úsáide as Roghnóirí Aicme agus Roghnóirí Aitheantais
Ní mór do na roghnóirí go bhfuil tú ag titim ó shliocht den chineál sin a bheith i gcónaí. Mar shampla, shamhlú go raibh réimse den suíomh agat (cosúil le rannán) le tréith ID "billboard". D'fhéadfá roghnóir sliocht a chur ar bun den ID sin:
#billboard ul {background-color: #ccc; }Bheadh sé seo stíl ar an liosta neamhordaithe atá ina shliocht de eilimint le haitheantas ar "clár cláir". Is féidir leat an rud céanna a dhéanamh i gcomhair luachanna ranga.
div.billboard ul {background-color: #ccc; }Glacann sé leis seo go bhfuil luach ranga ag an rannán "billboard". Bheadh an CSS thuas stíl an eilimint
- taobh istigh d'aon rannán a bhfuil an luach ranga seo acu.
Is féidir leat a fháil go trom-láimh agus verbose le roghnóirí sliocht. Mar shampla, má úsáideann tú Dreamweaver chun do chód HTML a scríobh, tá socrú ann nuair a chuireann tú rialacha CSS nua a chruthaíonn an roghnóir uathoibríoch bunaithe ar shuíomh do chúrsóra ar an leathanach sin. Is éard atá i Dreamweaver sna cásanna seo ná go ndéanann sé roghnóir fírinneach agus roghnóir fada sliocht. Ní gá go bhfuil go leor sainiúlacht ann chun do CSS a bheith ag obair. Is é an méid is mian leat a dhéanamh ná cothromaíocht a fháil idir roghnóir sliocht atá sainiúil go leor ionas gur féidir leat druiliú síos go dtí na heilimintí cruinn a theastaíonn uait (gan na cinn styling nach mian leat difear) gan rialacha CSS a bheith acu go bhfuil roghnóirí ró mór.
- agus an ogha de an
- leanbh an eilimint sin, agus gurb é an leanbh an