Istifadə edərək: nth-of-tipi (n) Masalarla
Cədvəlləri oxumaq asanlaşdırmaq üçün alternativ fon rəngləri olan stil sıralarına tez-tez kömək edir. Stil masalarının ən yaygın yollarından biri, hər bir sıra arka plan rengini təyin etməkdir. Bu tez-tez "zebra zolaqları" adlanır.
Bunu bir CSS sinfi ilə hər bir sıra qoyaraq və sonra bu sinif üçün üslub müəyyən edərək yerinə yetirmək olar. Bu işlər, lakin bu barədə getmək üçün ən yaxşı və ya ən səmərəli yol deyildir.
Bu metodu istifadə edərkən, hər masanın dəyişdirilməsi ilə uyğun olduğunu təmin etmək üçün masanın hər bir satırını düzəldə bilərsiniz. Məsələn, masanıza yeni bir satır əlavə etsəniz, aşağıda göstərilən hər bir satır sinfi dəyişdirilməlidir.
CSS zebra zolaqlı stil masalarını asanlaşdırır. Hər hansı əlavə HTML xüsusiyyətləri və ya CSS dərsləri əlavə etmək lazım deyilsə, yalnız nth-of-type (n) CSS selektorunu istifadə edin .
The nth-of-type (n) seçicisi CSS-də struktur bir söz-sinifdir ki, bu elementlər valideyn və qohumluq elementlərinə münasibətdə stil elementlərinə imkan verir. Onların mənbə sifarişinə əsasən bir və ya daha çox element seçmək üçün istifadə edə bilərsiniz. Başqa sözlə desək, valideynin müəyyən bir növünün n-uşağı olan hər elementə uyğun ola bilər.
N hərfi bir söz (tək və ya hətta), bir sıra və ya bir formul ola bilər.
Məsələn, hər bir digər paraqraf etiketini sarı bir fon rəngi ilə tərtib etmək üçün CSS sənədiniz daxildir:
p: nth-of-tipi (tək) {
fon: sarı;
}
HTML Cədvəlinizlə Başlayın
Birincisi, cədvəlinizi normal olaraq HTML-də yazarkən yaradın. Satır və ya sütunlara xüsusi bir sinif əlavə etmir.
Sizin üslubunuzda aşağıdakı CSS əlavə edin:
tr: nth-of-tipi (tək) {
fon-rəng: #ccc;
}
Bu, birinci sıra ilə başlayan gümüş bir fon rəngli hər bir sıra tərtib edəcəkdir.
Eyni şəkildə Stillərə Alternativ Sütunlar
Masalarınızdakı sütunlara eyni cür styling edə bilərsiniz. Bunu etmək üçün, sadəcə CSS sinifində tr-ni td-ə dəyişin. Misal üçün:
td: nth-of-tipi (tək) {
fon-rəng: #ccc;
}
N-tipli (n) selektorda formulalar istifadə
Selektorda istifadə olunan formulanın sintaksisi + bdir.
a döngünün və ya indeksi ölçüsünü əks etdirən bir rəqəmdir.
n əslində "n" hərfidir və 0 saylı ulduzu əks etdirir.
+ bir operatordur, bu da ola bilər "-"
b bir tamsayıdır və ofset dəyərini təmsil edir, məsələn, selektor fon rəngini tətbiq etməyə başlamalıdır. Bir operatorun formuluna daxil olması tələb olunur.
Məsələn, hər 3-cü sıra üçün fon rəngini təyin etmək istəyirsinizsə, formula 3n + 0 olar. CSS -iniz belə ola bilər:
tr: nth-of-type (3n + 0) {
arxa plan: əyri;
}
Nth-of-type selector istifadə üçün faydalı alətlər
Yalançı sinfi tipli selektorun formulun aspektinə görə bir az narahatlıq hiss edirsinizsə, nth Tester saytını istədiyiniz görünüşü əldə etmək üçün sözdizimini müəyyənləşdirməyə kömək edə biləcək faydalı bir vasitə kimi cəhd edin. Nth-of-tipini seçmək üçün açılır menyudan istifadə edin (burada, nth-child kimi digər pseudo-dərsləri də sınamaq da mümkündür).