Meskipun Anda pikir alasannya mungkin menjadi masalah browser, lebih mungkin bahwa definisi gaya Anda adalah urutan yang salah. Untuk memastikan bahwa Anda dapat melihat gaya koneksi di berbagai negara, urutan gaya yang benar harus:
Tautan - Dikunjungi - Hover - Active atau LVHA (Singkatan).
Konten Inti:
Setiap pemilih memiliki kekhususan. Jika dua pemilih diterapkan pada elemen yang sama, pemilih dengan spesifisitas yang lebih tinggi akan menang dan memiliki prioritas. Misalnya:
P.hithere {color: green;} / * spesifik = 1,1 * /p {color: red;} / * spesifik = 1 * / /
Konten paragraf apa pun dengan kelas kelas = Hithere ditampilkan dengan warna hijau, bukan merah. Kedua pemilih memiliki set warna, tetapi pemilih dengan spesifisitas yang lebih tinggi akan menang.
Bagaimana kelas semu memengaruhi spesifisitas? Mereka memiliki nilai bobot yang persis sama, dan gaya berikut memiliki nilai bobot spesifik yang sama:
A: link {color: blue;} / * spesifik = 1,1 * /a: Active {color: red;} / * spesifik = 1,1 * /a: hover {color: magenta;} / * spesifik = 1,1 * /a: dikunjungi {warna: ungu;} / * spesifik = 1,1 * /
Ini adalah pengaturan gaya untuk hyperlink. Dalam kebanyakan kasus, beberapa gaya ini perlu diatur pada saat yang sama. Misalnya, hyperlink yang tidak diketahui dapat diatur dalam gaya yang berbeda di kedua mouse hover dan aktivasi mouse saat melayang dan mengklik. Karena tiga aturan di atas dapat diterapkan pada hyperlink, dan semua pemilih memiliki spesifisitas yang sama, maka sesuai dengan aturan, gaya terakhir menang. Jadi gaya aktif tidak akan pernah ditampilkan karena selalu ditutupi oleh gaya hover (mis. Hover lebih disukai). Sekarang mari kita analisis apa efek dari mouseover hyperlink yang telah dikunjungi adalah, dan hasilnya selalu ungu :( karena gaya yang dikunjungi selalu diutamakan daripada aturan gaya negara lainnya (termasuk aktif dan melayang).
Inilah sebabnya mengapa CSS1 merekomendasikan pesanan gaya:
A: Linka: Visita: Hovera: Active
Faktanya, urutan dua gaya pertama dapat ditukar, karena hyperlink tidak dapat ada pada saat yang sama seperti baik negara yang belum terjangkau dan diakses. (: Tautan berarti tidak diketahui; saya tidak tahu mengapa tidak didefinisikan seperti ini.)
CSS2 sekarang memungkinkan kelas semu muncul dalam kelompok serikat, misalnya:
A: Visited: Hover {Color: Maroon;} / * spesifik = 2,1 * /a: tautan: hover {color: magenta;} / * spesifik = 2,1 * /a: hover: aktif {warna: cyan;} / * spesifik = 2,1 * /
Mereka memiliki kekhususan yang sama, tetapi mereka berlaku untuk binatang buas yang berbeda secara fundamental, dan karenanya tidak bertentangan. Anda bisa mendapatkan kombinasi yang aktif, misalnya.
Bagaimana memahami kekhususan yang terlibat dalam artikel ini? Spesifisitas dapat dipahami sebagai string angka yang tidak hanya terhubung bersama. Contoh di atas: p.hithere {color: green;} / * spesifisitas = 11 * /p {color: red;} / * spesifisitas = 1 * / /
Ini tampaknya merupakan operasi sederhana berdasarkan desimal. Namun, perhitungan spesifisitas tidak dapat menggunakan algoritma desimal. Misalnya, jika Anda menggunakan 15 pemilih bersama -sama, nilai -nilai tertimbang spesifiknya masih lebih rendah dari pemilih kelas sederhana. Misalnya:
.hello {color: red;} / * spesifik = 10 * /html body div ul li ol ul li ul li ul li (color: green;} / * spesifik = 15 * / /
10 sebenarnya adalah spesifisitas yang mengikuti 1 dan kemudian nol, bukan sepuluh. Kita dapat menggunakan hexadecimal untuk menggambarkan aturan gaya sebelumnya, seperti yang berikut:
.hello {color: red;} / * spesifik = 10 * /html body div ul li ol ul li ul li ul li li (warna: green;} / * spesifik = f * / /
Satu -satunya masalah adalah bahwa jika Anda ingin menambahkan dua atau lebih pemilih ke aturan gaya kedua, maka Anda mungkin mendapatkan 17 spesifik yang akan bingung lagi. Faktanya, kekhususannya mungkin tak terbatas, jadi untuk menghindari lebih banyak kebingungan, disarankan untuk menggunakan koma untuk memisahkan nilai spesifik.
Webmaster menyarankan: Ulangi perhitungan nilai spesifisitas tertimbang. Pengaturan situs web CSS mencerminkan kemampuan Anda untuk mengontrol halaman. Dalam pengembangan situs web yang dinamis, status CSS juga sangat penting. Baca informasi lebih lanjut, berlatih lebih banyak, dan datang ke wulin.com lebih lanjut! Jika Anda menyukai situs ini, promosikannya atas nama Anda! Terima kasih sudah membaca.