Menggunakan: nth-of-type (n) Dengan Jadual
Untuk membuat jadual lebih mudah untuk dibaca, ia sering membantu dengan barisan gaya dengan warna latar belakang bergantian. Salah satu cara yang paling biasa untuk jadual gaya adalah untuk menetapkan warna latar belakang setiap baris lain. Ini sering disebut sebagai "jalur zebra."
Anda boleh melakukannya dengan menetapkan setiap baris lain dengan kelas CSS dan kemudian menentukan gaya untuk kelas itu. Ini berfungsi tetapi bukan cara terbaik atau paling berkesan untuk melakukannya.
Apabila menggunakan kaedah ini, setiap kali anda perlu mengedit jadual itu, anda mungkin perlu mengedit setiap baris dalam jadual untuk memastikan setiap baris selaras dengan perubahan. Sebagai contoh, jika anda memasukkan baris baru ke jadual anda, setiap baris lain di bawahnya perlu mempunyai kelas berubah.
CSS memudahkan jadual gaya dengan jalur zebra. Anda tidak perlu menambah atribut HTML tambahan atau kelas CSS, anda hanya menggunakan: pemilih nth-of-type (n) CSS .
The: nth-of-type (n) pemilih adalah kelas pseudo-struktur dalam CSS yang membolehkan anda untuk elemen gaya berdasarkan hubungan mereka dengan ibu bapa dan saudara-saudara elemen. Anda boleh menggunakannya untuk memilih satu atau lebih elemen berdasarkan pesanan sumber mereka. Dalam erti kata lain, ia boleh sepadan dengan setiap elemen yang merupakan anak ke-n jenis ibu bapa yang tertentu.
Huruf n boleh menjadi kata kunci (seperti ganjil atau bahkan), nombor atau formula.
Contohnya, untuk gaya setiap tag perenggan lain dengan warna latar belakang kuning, dokumen CSS anda akan termasuk:
p: nth-of-type (ganjil) {
latar belakang: kuning;
}
Mulakan Dengan Jadual HTML Anda
Pertama, buat jadual anda seperti yang anda biasanya tulis dalam HTML. Jangan menambah sebarang kelas khas ke baris atau lajur.
Dalam stylesheet anda, tambahkan CSS berikut:
tr: nth-of-type (ganjil) {
warna latar belakang: #ccc;
}
Ini akan menyusun setiap baris lain dengan warna latar kelabu bermula dengan baris pertama.
Style Columns Alternating in the Same Way
Anda boleh melakukan jenis gaya yang sama pada lajur dalam jadual anda. Untuk berbuat demikian, cukup ubah tr dalam kelas CSS anda ke td. Sebagai contoh:
td: nth-of-type (ganjil) {
warna latar belakang: #ccc;
}
Menggunakan Formula dalam pemilih nth-of-type (n)
Sintaks untuk formula yang digunakan dalam pemilih adalah + b.
a adalah nombor yang mewakili saiz kitaran atau indeks.
n sebenarnya huruf "n" dan mewakili kaunter, yang bintang pada 0.
+ ialah pengendali, yang mungkin juga "-"
b adalah integer dan mewakili nilai offset-contohnya, berapa banyak baris yang harus dipilih pemilih warna latar belakang. Ini diperlukan sekiranya pengendali dimasukkan ke dalam formula.
Sebagai contoh, jika anda mahu menetapkan warna latar belakang untuk setiap baris ke-3, formula anda akan menjadi 3n + 0. CSS anda kelihatan seperti ini:
tr: nth-of-type (3n + 0) {
latar belakang: slategray;
}
Alat Berguna untuk Menggunakan Pemilih nth-of-type
Sekiranya anda rasa agak sedikit dengan aspek formula menggunakan pseudo-class nth-of-type pemilih, cuba: Tester Tester sebagai alat berguna yang dapat membantu anda menentukan sintaks untuk mencapai rupa yang anda inginkan. Gunakan menu lungsur turun untuk memilih nth-of-type (anda juga boleh bereksperimen dengan kelas pseudo yang lain di sini juga seperti nth-child).