Lilo: nth-of-type (n) Pẹlu awọn tabili
Lati jẹ ki awọn tabili rọrun lati ka, o wulo nigbagbogbo fun awọn ori ila pẹlu awọn awọ lẹhin miiran. Ọkan ninu awọn ọna ti o wọpọ julọ si awọn tabili ti ara ni lati ṣeto awọ-lẹhin ti gbogbo awọn ila miiran. Eyi ni a tọka si bi awọn "ṣiṣan labalaba."
O le ṣe eyi ni nipa fifi gbogbo ila miiran pẹlu ẹgbẹ CSS ati lẹhinna ṣe asọye ara fun kilasi naa. Eyi n ṣiṣẹ ṣugbọn kii ṣe ọna ti o dara ju tabi ọna ti o dara julọ lati lọ nipa rẹ.
Nigbati o ba nlo ọna yii, ni gbogbo igba ti o nilo lati ṣatunkọ tabili naa o le ni lati satunkọ gbogbo awọn ila kan ninu tabili lati rii daju pe awọn ila kọọkan ni ibamu pẹlu awọn ayipada. Fún àpẹrẹ, ti o ba fi ọwọn tuntun kan si tabili rẹ, gbogbo awọn ila ti o wa ni isalẹ o nilo lati jẹ ki kilasi naa yipada.
CSS ṣe o rọrun lati awọn tabili ti ara pẹlu awọn ṣiṣan labalaba. O ko nilo lati fi afikun awọn eroja HTML tabi awọn CSS kilasi, o kan lo: nth-of-type (n) selector CSS .
Iwọn: nth-of-type (n) oludasile jẹ ẹya-iṣẹ ti o ni ile-iṣẹ ni CSS ti o fun laaye si awọn eroja ti ara ti o da lori awọn ibasepọ wọn si obi ati awọn eroja tibirin. O le lo o lati yan ọkan tabi diẹ ẹ sii awọn eroja ti o da lori ilana orisun wọn. Ni awọn ọrọ miiran, o le ṣe deede gbogbo awọn idi ti o jẹ ọmọ ọmọde ti iru iru ti obi rẹ.
Lẹta ti n le jẹ Koko (bii odidi tabi koda), nọmba kan, tabi agbekalẹ kan.
Fun apẹẹrẹ, lati ṣe ara gbogbo ami tag pẹlu miiran pẹlu awọ awọ ofeefee, iwe CSS rẹ yoo ni:
p: nth-of-type (odd) {
lẹhin: ofeefee;
}
Bẹrẹ pẹlu Ọpọn HTML Rẹ
Akọkọ, ṣẹda tabili rẹ bi iwọ yoo ṣe kọwe ni HTML. Ma ṣe fi awọn kilasi pataki kan kun si awọn ori ila tabi awọn ọwọn.
Ni awoṣe rẹ, fi CSS ti o tẹle yii han:
tr: iru-ti-iru (odd) {
lẹhin-awọ: #ccc;
}
Eyi yoo ṣe aṣa gbogbo awọn ila miiran pẹlu awọ awọ awọ-awọ ti o bẹrẹ pẹlu ipo akọkọ.
Awọn Ọwọn Iyanju Style ni Ọna Kan
O le ṣe iru iṣọkan kanna si awọn ọwọn ninu awọn tabili rẹ. Lati ṣe bẹẹ, ṣe iyipada ayipada ni kọnputa CSS rẹ lati td. Fun apere:
td: nth-of-type (odd) {
lẹhin-awọ: #ccc;
}
Lilo awọn agbekalẹ ni nth-of-type (n) Selector
Ibẹrisi fun agbekalẹ kan ti o lo ninu olutẹhin jẹ ẹya + b.
a jẹ nọmba kan ti o duro fun igbesi-aye tabi nọmba itọka.
n jẹ gangan lẹta "n" o si duro fun counter, awọn irawọ ni 0.
+ jẹ oniṣẹ ẹrọ, eyi ti o le tun jẹ "-"
b jẹ nọmba odidi kan ati pe o duro fun iwọn aiṣedeede-fun apẹẹrẹ, iye awọn ori ila ti o yẹ ki o yan oluṣamuṣi awọ lẹhin. Eyi ni a beere ti o ba jẹ oniṣẹ kan ninu agbekalẹ.
Fun apere, ti o ba fẹ ṣeto awọ awọ lẹhin gbogbo ọjọ mẹta, agbekalẹ rẹ yoo jẹ 3n + 0. CSS rẹ le dabi eyi:
tr: iru-iru-iru (3n + 0) {
lẹhin: slategray;
}
Awọn Irinṣẹ Iranlọwọ fun Lilo nth-ti-type Selector
Ti o ba rilara diẹ ti o ni irọra nipasẹ ọna abala ti lilo aṣoju-iru-ti-iru-iru, ṣe ayẹwo: Aaye Atunwo nth gẹgẹ bi ọpa ti o wulo ti o le ṣe iranlọwọ fun ọ lati ṣafihan iṣeduro lati ṣe aṣeyọri oju ti o fẹ. Lo akojọ aṣayan akojọ aṣayan lati yan irufẹ-iru (o tun le ṣàdánwò pẹlu awọn ile-iṣẹ miiran ti o wa nibi, ju, bii ọmọ-ọmọ).