Defnyddio: nth-o-type (n) Gyda Thablau
Er mwyn gwneud y tablau yn haws i'w darllen, mae'n aml yn ddefnyddiol i greu rhesi gyda lliwiau cefndir yn ail. Un o'r ffyrdd mwyaf cyffredin o dablau arddull yw gosod lliw cefndir pob rhes arall. Cyfeirir at hyn yn aml fel "stripiau sebra."
Gallwch gyflawni hyn trwy osod pob rhes arall gyda dosbarth CSS ac yna diffinio'r arddull ar gyfer y dosbarth hwnnw. Mae hyn yn gweithio ond nid y ffordd orau neu'r ffordd fwyaf effeithlon o fynd ati.
Wrth ddefnyddio'r dull hwn, bob tro mae angen ichi olygu'r bwrdd hwnnw efallai y bydd yn rhaid ichi olygu pob rhes yn y tabl er mwyn sicrhau bod pob rhes yn gyson â'r newidiadau. Er enghraifft, os ydych yn mewnosod rhes newydd i'ch bwrdd, rhaid i bob rhes arall islaw fod wedi newid y dosbarth.
Mae CSS yn ei gwneud yn hawdd i dablau arddull gyda stribedi sebra. Nid oes angen i chi ychwanegu unrhyw nodweddion HTML neu ddosbarthiadau CSS ychwanegol, ond rydych chi'n defnyddio'r: nth-of-type (n) CSS selector .
Mae'r: nth-of-type (n) yn ddetholiad strwythurol yn CSS sy'n eich galluogi i arddull elfennau yn seiliedig ar eu perthnasoedd i elfennau rhieni a brawddegau. Gallwch ei ddefnyddio i ddewis un neu fwy o elfennau yn seiliedig ar eu trefn ffynhonnell. Mewn geiriau eraill, gall fod yn cydweddu â phob elfen sy'n blentyn o fath arbennig ei riant.
Gall y llythyr n fod yn allweddair (megis rhyfedd neu hyd yn oed), rhif, neu fformiwla.
Er enghraifft, i arddull pob tag paragraff arall gyda lliw cefndir melyn, byddai'ch dogfen CSS yn cynnwys:
p: nth-o-math (od) {
cefndir: melyn;
}
Dechreuwch â'ch Tabl HTML
Yn gyntaf, crewch eich bwrdd fel y byddech fel rheol yn ei ysgrifennu yn HTML. Peidiwch ag ychwanegu unrhyw ddosbarthiadau arbennig i'r rhesi na'r colofnau.
Yn eich taflen arddull, ychwanegwch y CSS canlynol:
tr: nth-of-type (odd) {
cefndir-liw: #ccc;
}
Bydd hyn yn arddull pob rhes arall gyda lliw cefndir llwyd gan ddechrau gyda'r rhes gyntaf.
Arddull Colofnau Amgen yn yr Un Ffordd
Gallwch chi wneud yr un math o arddull i golofnau yn eich tablau. I wneud hynny, dim ond newid y tr yn eich dosbarth CSS i d. Er enghraifft:
td: nth-of-type (odd) {
cefndir-liw: #ccc;
}
Defnyddio Fformiwlâu mewn dewisydd nth-o-fath (n)
Y cystrawen ar gyfer fformiwla a ddefnyddir yn y detholydd yw + b.
a yw nifer sy'n cynrychioli maint y cylch neu fynegai.
n mewn gwirionedd yw'r llythyr "n" ac mae'n cynrychioli cownter, sy'n sêr ar 0.
+ yn weithredwr, a all fod yn "-" hefyd
Mae b yn gyfanrif ac mae'n cynrychioli'r gwerth gwrthbwyso-er enghraifft, faint o resymau sydd i lawr os yw'r detholydd yn dechrau cymhwyso lliw cefndirol. Mae angen hyn os yw gweithredwr wedi'i gynnwys yn y fformiwla.
Er enghraifft, os ydych am osod lliw cefndir ar gyfer pob 3ydd rhes, byddai'ch fformiwla yn 3n + 0. Efallai y bydd eich CSS yn edrych fel hyn:
tr: nth-of-type (3n + 0) {
cefndir: slategray;
}
Offer defnyddiol ar gyfer Dewisydd nth-o-fath
Os ydych chi'n teimlo'n flinedig gan yr agwedd fformiwla o ddefnyddio'r detholwr nth-o-ddosbarth ffug, ceisiwch: y wefan nth Tester fel offeryn defnyddiol a all eich helpu i ddiffinio'r cystrawen er mwyn cyflawni'r edrychiad rydych ei eisiau. Defnyddiwch y ddewislen syrthio i ddewis nth-o-fath (gallwch hefyd arbrofi gyda dosbarthiadau ffug eraill yma hefyd, megis nth-plentyn).