Penjelasan terperinci tentang penggunaan empat keadaan hyperconnection_HTML/Xhtml_Web page production

Walaupun anda berpendapat kemungkinan penyebabnya ialah masalah penyemak imbas, kemungkinan besar susunan takrif gaya anda adalah salah. Untuk memastikan anda boleh melihat gaya sambungan dalam keadaan berbeza, susunan gaya yang betul hendaklah:

" pautan - dilawati - tuding - aktif " atau " LVHA " (singkatan).

Kandungan teras:

Setiap pemilih pemilih mempunyai "kekhususan". Jika dua pemilih digunakan pada elemen yang sama, pemilih dengan kekhususan yang lebih tinggi akan menang dan mempunyai keutamaan. Contohnya:

P.di sini {warna: hijau;} /* kekhususan = 1,1 */P {warna: merah;} /* kekhususan = 1 */

Sebarang kandungan perenggan dengan class=di sini dipaparkan dalam warna hijau dan bukannya merah. Kedua-dua pemilih menetapkan warna, tetapi pemilih dengan kekhususan yang lebih tinggi akan menang.

Bagaimanakah kelas pseudo mempengaruhi kekhususan? Mereka mempunyai nilai pemberat yang sama dan gaya berikut mempunyai nilai pemberat kekhususan yang sama:

A:pautan {warna: biru;} /* kekhususan = 1,1 */A:aktif {warna: merah;} /* kekhususan = 1,1 */A:legar {warna: magenta;} /* kekhususan = 1,1 */A:dilawati {warna: ungu;} /* kekhususan = 1,1 */

Ini adalah tetapan penggayaan untuk hiperpautan. Dalam kebanyakan kes, adalah perlu untuk menetapkan beberapa gaya pada masa yang sama Contohnya, hiperpautan yang tidak dilawati boleh menetapkan gaya yang berbeza dalam dua keadaan "tuding tetikus" dan "pengaktifan tetikus" apabila tetikus melayang dan mengklik. Tiga peraturan di atas semuanya boleh digunakan pada hiperpautan, dan semua pemilih mempunyai kekhususan yang sama, kemudian mengikut peraturan, gaya terakhir "menang". Jadi gaya "aktif" tidak akan pernah ditunjukkan kerana ia sentiasa digantikan oleh gaya "legar" (iaitu "legar" diutamakan). Sekarang mari kita analisa kesan alih tetikus pada hiperpautan yang telah dilawati Hasilnya sentiasa berwarna ungu :(, kerana gaya "dilawati" sentiasa diutamakan daripada peraturan gaya negeri yang lain (termasuk "aktif" dan "legar").

Inilah sebabnya CSS1 mengesyorkan susunan gaya:

A:linkA:visitedA:hoverA:active

Malah, susunan dua gaya pertama boleh diterbalikkan, kerana hiperpautan tidak boleh mempunyai kedua-dua keadaan "tidak dilawati" dan "dilawati" pada masa yang sama. ( :pautan bermaksud " tidak dilawati "; Saya tidak tahu mengapa ia tidak ditakrifkan dengan cara ini.)

CSS2 kini membenarkan kelas pseudo muncul dalam bentuk "kumpulan yang disertai", contohnya:

A:dilawati:legar {warna: merah marun;} /* kekhususan = 2,1 */A:pautan:legar {warna: magenta;} /* kekhususan = 2,1 */A:legar:aktif {warna : cyan;} /* kekhususan = 2,1 */

Ia mempunyai kekhususan yang sama, tetapi ia digunakan untuk haiwan yang pada asasnya berbeza, jadi jangan bercanggah, contohnya, anda boleh mendapatkan kombinasi hover-aktif

Bagaimana untuk memahami "kekhususan" yang terlibat dalam artikel ini? Kekhususan boleh memahami rentetan nombor yang bukan semata-mata disambungkan bersama Contoh di atas: P.hither {color: green;} /* specificity = 11 */P {color: red;} /* specificity = 1 */

Ini nampaknya operasi berasaskan perpuluhan yang mudah. Walau bagaimanapun, algoritma perpuluhan tidak boleh digunakan untuk mengira "kekhususan". Contoh:

.hello {warna: merah;} /* kekhususan = 10 */HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (warna: hijau;} /* kekhususan = 15 */

" 10 " sebenarnya ialah "1" diikuti dengan "sifar", bukan "sepuluh". Kita boleh menggunakan perenambelasan untuk menerangkan kekhususan peraturan gaya sebelumnya, seperti berikut:

.hello {warna: merah;} /* kekhususan = 10 */HTML BODY DIV UL LI OL LI UL LI OL LI UL LI OL LI (warna: hijau;} /* kekhususan = F */

Satu-satunya masalah ialah jika anda ingin menambah dua atau lebih pemilih pada peraturan gaya kedua, maka anda mungkin mendapat kekhususan "17", yang akan menyebabkan kekeliruan lagi. Malah, kekhususan mungkin tidak terhingga, jadi untuk mengelakkan kekeliruan selanjutnya, adalah disyorkan untuk menggunakan koma untuk memisahkan nilai kekhususan.

Cadangan juruweb: Berulang kali mempraktikkan pengiraan nilai wajaran kekhususan Tetapan CSS tapak web mencerminkan keupayaan anda untuk mengawal halaman dalam pembangunan tapak web dinamik, status CSS juga sangat penting. Baca lebih lanjut Maklumat, berlatih lebih banyak, datang ke Laman Utama Skrip dengan lebih lanjut! Jika anda menyukai laman web ini, sila promosikannya! Terima kasih kerana membaca.