Mengapa CSS `.foo a:link` dan `.foo a:visited` Saya Mengatasi `a:hover` dan `a:active`?

Mengapa .foo a:link, .foo a:visited Selector Mengatasi a:hover, a:active Selector dalam CSS?

Tingkah laku yang tidak dijangka yang diterangkan dalam soalan timbul daripada peraturan kekhususan CSS. Kekhususan menentukan keutamaan peraturan CSS apabila berbilang peraturan digunakan pada elemen yang sama.

Jadual Kekhususan:

Selector	Specificity
a:link	0-0-1-1
a:visited	0-0-1-1
a:hover	0-0-1-1
a:active	0-0-1-1
.foo a:link	0-0-2-1
.foo a:visited	0-0-2-1

Seperti yang anda lihat, .foo a:link dan .foo a:visited mempunyai kekhususan yang lebih tinggi sedikit daripada a:hover dan a:active kerana pemilih kelas tambahan .foo.

Cara Penggantian Kekhususan Berfungsi:

Apabila berbilang peraturan dengan kekhususan berbeza digunakan pada elemen yang sama, peraturan dengan kekhususan yang lebih tinggi diutamakan. Dalam kes ini, .foo a:link dan .foo a:visited mempunyai kekhususan yang lebih tinggi daripada a:hover dan a:active, jadi gaya mereka mengatasi gaya yang terakhir.

Membetulkan Tingkah Laku:

Untuk menghalang .foo a:link, .foo a:dilawati pemilih daripada mengatasi a:hover, a:aktif, anda boleh meningkatkan kekhususan yang terakhir. Ini boleh dicapai dengan menambahkan pemilih anak pada peraturan tuding/aktif:

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

Dengan menambahkan kelas .foo sebagai pemilih kanak-kanak, kekhususan peraturan tuding/aktif meningkat kepada 0-0- 3-1, yang lebih tinggi daripada .foo a:link dan .foo a:visited. Akibatnya, gaya tuding/aktif akan diutamakan dan berkuat kuasa ke atas pautan/gaya yang dilawati apabila kedua-dua kelas pseudo berkenaan.

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