Taklukkan penyeleksi CSS tingkat lanjut

Penulis：Eve Cole Waktu Pembaruan：2009-09-07 21:27:44

Artikel asli: Taklukkan Penyeleksi CSS Tingkat Lanjut
Diterjemahkan dari:Menjinakkan Penyeleksi CSS Tingkat Lanjut

CSS adalah salah satu alat paling ampuh yang tersedia untuk desainer web. Dengan menggunakannya kita dapat mengubah antarmuka situs web dalam beberapa menit tanpa mengubah tag halaman. Namun terlepas dari kenyataan bahwa kita masing-masing menyadari bahwa ini berguna, penyeleksi CSS masih jauh dari potensinya, dan terkadang kita cenderung menggunakan kelas, id, div, span, dll yang berlebihan dan tidak berguna. HTML kita sangat berantakan.

Cara terbaik untuk menghindari gangguan ini pada tag Anda dan menjaganya tetap ringkas dan semantik adalah dengan menggunakan pemilih CSS yang lebih kompleks yang dapat menargetkan elemen tertentu tanpa menggunakan kelas atau id tambahan, dan dengan cara ini kita juga dapat membuat kode dan gaya kita lebih fleksibel .

Prioritas CSS

Sebelum mempelajari bidang penyeleksi CSS tingkat lanjut, penting untuk memahami cara kerja prioritas CSS sehingga kita mengetahui cara menggunakan penyeleksi dengan tepat dan menghindari membuang banyak waktu untuk men-debug sesuatu selama kita memperhatikan prioritas untuk memecahkan masalah jika

Ketika kita menulis CSS kita harus menyadari bahwa beberapa selector akan lebih tinggi dari selector lain dalam cascade. Selector yang kita tulis di akhir belum tentu mengesampingkan style yang kita tulis sebelumnya pada elemen yang sama.

Jadi bagaimana Anda menghitung prioritas pemilih tertentu ? Ini cukup sederhana jika Anda menganggap bahwa prioritas dinyatakan sebagai empat angka yang dipisahkan dengan koma, seperti: 1, 1, 1, 1 atau 0, 2, 0, 1

Angka pertama (a) biasanya 0, kecuali atribut style digunakan pada tag;
Angka kedua (b) adalah jumlah dari jumlah id pada pemilih;
Angka ketiga (c) adalah total penyeleksi atribut lain dan kelas semu yang digunakan pada pemilih ini. Ini termasuk pemilih kelas (.example) dan atribut (seperti li[id=red]);
Angka keempat (d) menghitung elemen (seperti tabel, p, div, dll.) dan elemen semu (seperti: baris pertama, dll.);
Pemilih universal (*) memiliki prioritas 0;
Jika dua penyeleksi mempunyai prioritas yang sama, penyeleksi selanjutnya dalam style sheet akan berlaku.

Mari kita lihat beberapa contoh agar lebih mudah dipahami:

#bilah sisi h2 — 0, 1, 0, 1
h2.judul — 0, 0, 1, 1
h2 + p — 0, 0, 0, 2
#sidebar p:baris pertama — 0, 1, 0, 2

Pada contoh di bawah, yang pertama akan berfungsi karena prioritasnya lebih tinggi daripada yang kedua:

#bilah samping p#pertama { warna: merah } — 0, 2, 0, 1
#sidebar p:baris pertama { warna: biru } — 0, 1, 0, 2

Penting untuk setidaknya memiliki pemahaman dasar tentang cara kerja prioritas, tetapi beberapa alat seperti Firebug, ketika kita memeriksa elemen tertentu, mencantumkan semua pasangan pemilih CSS dalam urutan prioritas pemilih untuk memberi tahu kita mana yang ada pada elemen tertentu berguna agar penyeleksi menjadi valid.

Ini memudahkan Anda melihat pemilih mana yang bertindak pada suatu elemen.

Artikel bermanfaat: