Mengapakah `.foo a` Mengatasi `a:hover` dan `a:active` dalam Kekhususan CSS?

Teka-teki Kekhususan: Mengapa .foo a Selector Overrules a:hover, a:active

Kekhususan CSS menentukan cara gaya digunakan berdasarkan pemilih berat badan. Dalam masalah yang diberikan, pemilih .foo bercanggah dengan a:hover dan a:active.

Memahami Kekhususan

Kekhususan ditentukan oleh bilangan teg, kelas , dan ID dalam pemilih, dengan setiap tahap memegang berat tertentu. Dalam kes ini, jadual kekhususan yang disediakan menunjukkan bahawa .foo a:link dan .foo a:visited mempunyai kekhususan yang lebih tinggi (0 0 2 1) daripada a:hover dan a:active (0 0 1 1).

Mengapa .foo a Mengatasi

Pemilih .foo a lebih khusus daripada a:hover dan a:active kerana ia digunakan pada pautan dalam elemen dengan kelas foo. Apabila elemen bertemu berbilang pemilih dengan kekhususan yang sama, gaya yang diisytiharkan terakhir digunakan.

Membetulkan .foo a Selector

Untuk membenarkan a:hover dan a: gaya aktif untuk diutamakan, pemilih .foo a mesti diubah suai untuk mempunyai kekhususan yang lebih rendah. Satu pembetulan yang mungkin ialah:

.foo a:hover, .foo a:active {
    color: red;
}

Dengan menambahkan .foo sebelum kelas pseudo hover dan aktif, kekhususan kekal lebih tinggi daripada a:hover dan a:active, memastikan gaya untuk kelas pseudo tersebut adalah digunakan dalam elemen dengan foo kelas.

Takeaway

Kekhususan menentukan cara gaya CSS digunakan. Memahami konsep ini adalah penting untuk mengawal keutamaan gaya dan mencapai kesan visual yang diingini.

Atas ialah kandungan terperinci Mengapakah `.foo a` Mengatasi `a:hover` dan `a:active` dalam Kekhususan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!