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

Teka-teki Kekhususan Pemilih CSS: Mengapa .foo a:link Mengatasi a:hover

Dalam bidang CSS, kekhususan pemilih boleh menjadi sedikit penentu minda . Mari kita selami teka-teki menarik yang menunjukkan bagaimana pemilih .foo a:link boleh mengatasi pemilih a:hover dan a:active yang lebih spesifik.

Definisi Masalah

Pertimbangkan kod berikut:

<div class="foo">
    <a href="#">Example</a>
</div>

a:link, a:visited {
    color: blue;
}

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

.foo a:link, .foo a:visited {
    color: green;
}

Jangkaannya ialah dengan melayang di atas pautan akan menjadikan ia merah, tetapi sebaliknya, ia kekal hijau. Tingkah laku yang membingungkan ini memerlukan pemeriksaan yang lebih teliti terhadap lata CSS.

Kekhususan dalam CSS

Kekhususan menentukan susunan peraturan CSS digunakan pada elemen. Kekhususan yang lebih tinggi menang daripada kekhususan yang lebih rendah. Formula berikut mengira kekhususan:

• Gaya sebaris: 1, 0, 0, 0
• Pemilih ID: 0, 1, 0, 0
• Pemilih kelas: 0, 0, 1, 0
• Kelas Pseudo dan unsur pseudo: 0, 0, 0, 1

Kekhususan Pemilih dalam Teka-teki

Mengira kekhususan pemilih kami:

• a:pautan , a:dilawati, a:hover, a:aktif: 0, 0, 1, 1
• .foo a:link, .foo a:dilawati: 0, 0, 2, 1

Seperti yang anda lihat, .foo a:link dan .foo a :pemilih yang dilawati mempunyai kekhususan yang lebih tinggi daripada pemilih a:hover dan a:aktif (2 > 1).

Kesimpulan

Sebab bagi tingkah laku yang mengejutkan itu ialah pemilih .foo a:link dan .foo a:dilawati mempunyai kekhususan yang lebih tinggi daripada a:hover dan a:active pemilih. Ini bermakna walaupun a:hover dan a:active lebih khusus dari segi kelas pseudonya, kekhususan kelas pemilih .foo menang.

Untuk membetulkan isu ini, pembetulan yang dicadangkan dalam masalah ( membatalkan ulasan .foo a:hover dan .foo a:peraturan aktif) adalah perlu. Dengan menambahkan peraturan ini dengan kekhususan yang sama seperti peraturan .foo a:link dan .foo a:visited, gaya a:hover dan a:active kini akan diutamakan.

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