Хэрэглэх: nth-of-type (n) Хүснэгтүүдтэй
Хүснэгтийг уншихад хялбар болгохын тулд ээлжит өнгөөр ялгаатай хэв маягийг мөр болгон ашиглах нь ихэвчлэн тустай байдаг. Хүснэгтийн хамгийн түгээмэл аргуудын нэг бол бусад бүх мөрийн дэвсгэрийн өнгөийг тогтоох явдал юм. Энэ нь ихэвчлэн "тахө судлууд" гэж нэрлэдэг.
Үүнийг хийж чадвал CSS класс бүрийг өөр мөр болгон тохируулж дараа нь тухайн классын хэв маягийг тодорхойлно. Энэ нь ажил биш боловч үүнийг хийх хамгийн сайн, хамгийн үр дүнтэй арга биш юм.
Энэ аргыг ашиглахдаа хүснэгтийг засварлах бүрдээ мөр бүр нь өөрчлөлтүүдтэй тохирч байхын тулд хүснэгт бүрт засварлах шаардлагатай болж магадгүй юм. Жишээлбэл, хэрэв та шинэ мөрийг өөрийн хүснэгтэд оруулбал өөр анги болгонд анги өөрчлөгдсөн байх хэрэгтэй.
CSS нь тахө зураасаар хүснэгтийн хэв маягийг хялбаршуулж өгдөг. Та ямар ч нэмэлт HTML шинж чанарууд эсвэл CSS ангиллуудыг нэмэх хэрэггүй, та зүгээр л: nth-of-type (n) CSS selector .
Nth-of-type (n) selector нь CSS доторх бүтцийн псевдо-класс юм. Энэ нь таны элементүүдийг эцэг эх, ах эгч нартай харилцах харилцаанд суурилсан элементүүдийг загварчлах боломжийг олгодог. Та тэдгээрийг эх үүсвэрийн захиалга дээр тулгуурлан нэг буюу хэд хэдэн элементүүдийг сонгох боломжтой. Өөрөөр хэлбэл, энэ нь эцэг эхийнхээ тодорхой төрөлд хамаарах nth хүүхэд бүрийн элемент бүртэй тохирч болно.
N үсэг нь түлхүүр үг байж болно (сондгой эсвэл бүр гэх мэт), тоо, эсвэл томъёо.
Жишээлбэл, бусад догол мөр бүрийг шар дэвсгэрийн өнгөөр хэвлүүлэхийн тулд таны CSS документэд орно:
p: nth-of-type (сондгой) {
дэвсгэр: шар;
}
Таны HTML хүснэгтээс эхэл
Нэгдүгээрт, ерөнхийдөө HTML хэлбэрээр бичдэг шигээ хүснэгтээ үүсгэ. Мөр эсвэл баганад ямар нэг онцгой класс нэмж болохгүй.
Таны загварын хуудсанд дараах CSS-г нэмнэ үү:
tr: nth-of-type (сондгой) {
background-color: #ccc;
}
Энэ мөр нь эхний мөр бүрт эхлэн саарал дэвсгэр өнгөөр бусад мөр бүрийг хэвлэнэ.
Нэг чиглэлд өөр өөр багана
Та хүснэгтийн багананд ижил төрлийн загвар хийж болно. Ингэхийн тулд өөрийн CSS класс дахь td-г өөрчлөх хэрэгтэй. Жишээлбэл:
td: nth-of-type (сондгой) {
background-color: #ccc;
}
Томъёогоор (n) сонгогчоор томьёог ашиглах
Сонгон шалгаруулагчид хэрэглэгддэг томъёоны синтакс нь + b.
a нь цикл эсвэл индексийн хэмжээг харуулдаг тоо юм.
n нь үнэндээ "n" гэсэн үсгийг илэрхийлж, тоолуурыг 0-ээр илэрхийлдэг.
+ нь оператор бөгөөд энэ нь бас "-"
b нь бүхэл тоо бөгөөд офсет утгыг илэрхийлнэ. Жишээлбэл, өнгө сонгохдоо сонгогч эхлэх хичнээн эгнээ. Хэрэв оператор томъёонд орсон бол энэ нь шаардлагатай.
Жишээлбэл, 3-р мөр бүрт суурь өнгийг тохируулахыг хүсвэл таны томъёо 3n + 0 байх болно. Таны CSS иймэрхүү харагдах болно:
tr: nth-of-type (3n + 0) {
дэвсгэр: slategray;
}
Nth-of-type Selector-ийн ашиглахад ашигтай хэрэгсэл
Хэрэв та псевдо ангиллын nth-type-төрөл сонгосон аргыг ашиглахад жаахан гомдол мэдэрч байгаа бол: nth Tester сайтыг хүссэн харуулахын тулд синтакс тодорхойлоход танд туслах хэрэгсэл болгон ашигла. Завсардах цэсийг ашиглан nth-of-type (та бас nth-child гэх мэт өөр псевдо класстай туршилт хийж болно).