Ngagunakeun: nth-of-jenis (n) Jeung Tables
Nyieun tabel gampang maca, éta mindeng mantuan mun gaya barisan jeung alik kelir latar. Salah sahiji cara nu paling umum pikeun gaya tabel nyaéta pikeun ngeset warna latar tukang unggal baris lianna. Ieu sering disebut "stripes zebra".
Anjeun tiasa ngalengkepan ieu ku netepkeun unggal baris lianna ku kelas CSS lajeng watesan gaya pikeun kelas éta. Ieu jalan tapi teu pangalusna atawa pang éfisiénna jalan ka buka ngeunaan eta.
Lamun ngagunakeun padika ieu, unggal waktos Anjeun perlu ngédit tabel nu mungkin kudu ngédit unggal baris tunggal dina tabél pikeun mastikeun unggal jejer téh konsisten jeung parobahanana. Contona, upami anjeun nyelapkeun Baris anyar pikeun méja anjeun, unggal berturut lianna handap eta perlu geus kelas robah.
CSS matak ngamudahkeun pikeun gaya tabel kalawan stripes zebra. Anjeun teu kedah nambahkeun naon tambahan HTML atribut atawa kelas CSS, anjeun ngan nganggo: nth-of-jenis (n) CSS pamilihan .
The: nth-of-jenis (n) pamilihan téh pseudo-kelas struktural dina CSS nu ngidinan Anjeun pikeun gaya elemen dumasar kana hubungan maranéhna pikeun kolot sarta sibling elemen. Anjeun bisa make eta pikeun milih salah sahiji atawa leuwih elemen dumasar kana urutan sumber maranéhanana. Dina basa sejen, eta bisa cocog unggal unsur anu geus anak nth of a tipe husus indungna na.
Hurup n tiasa janten keyword (kayaning ganjil atawa malah), jumlah, atawa rumus.
Contona, mun gaya unggal tag ayat sejenna ku warna latar konéng, dokumen CSS anjeun bakal ngawengku:
p: nth-of-jenis (ganjil) {
latar: konéng;
}
Mimitian Jeung Table HTML anjeun
Kahiji, nyieun tabel anjeun anjeun normal bakal nulis dina HTML. Ulah nambahkeun naon kelas husus ka barisan atanapi kolom.
Dina stylesheet anjeun, nambah CSS handap:
TR: nth-of-jenis (ganjil) {
tukang-warna: #ccc;
}
Ieu bakal gaya unggal baris lianna ku warna tukang abu dimimitian ku baris kahiji.
Kolom gaya robah dina Sarua Jalan
Anjeun tiasa ngalakukeun jenis sarua styling kana kolom dina tabel Anjeun. Jang ngalampahkeun kitu, cukup ku ngarobah TR dina kelas CSS anjeun ka TD. Salaku conto:
TD: nth-of-jenis (ganjil) {
tukang-warna: #ccc;
}
Ngagunakeun Rumus dina (n) pamilihan nth-of-tipe
The rumpaka keur rumus dipaké dina pamilihan nu mangrupa + b.
ngarupakeun jumlah nu ngagambarkeun siklus atawa indéks ukuranana.
n sabenerna hurup "n" na ngagambarkeun counter nu Béntang dina 0.
+ Mangrupa operator, nu bisa ogé jadi "-"
b mangrupa integer sarta ngagambarkeun nilai-pikeun offset conto, sabaraha barisan handap kedah pamilihan nu ngawitan nerapkeun warna latar. Ieu diperlukeun lamun hiji operator téh kaasup kana rumus.
Contona, upami anjeun hoyong nyetel warna tukang keur unggal baris 3rd, rumusna anjeun bakal jadi 3n + 0. CSS Anjeun bisa kasampak kawas kieu:
TR: nth-of-jenis (3n + 0) {
latar: slategray;
}
Pakakas mantuan pikeun Maké nth-of-tipe pamilihan
Lamun nuju perasaan saeutik daunted ku aspék rumus ngagunakeun pseudo-kelas pamilihan nth-of-jenis, coba éta: loka tester nth salaku alat mangpaat anu bisa mantuan Anjeun nangtukeun rumpaka ka ngahontal katingal rék. Paké menu dropdown pikeun milih nth-of-jenis (anjeun ogé tiasa ékspérimén kalawan pseudo-kelas séjén di dieu, teuing, kayaning nth-anak).