Mengapa Pemilih CSS Kelas dan Kelas Pseudo Mengatasi Pemilih Kelas Pseudo Sahaja pada Tuding?

Mengapa Pemilih CSS dengan Kekhususan Lebih Tinggi Mengatasi Yang Lain: Kes Penampilan Pautan pada Tuding

Pengenalan

Dalam CSS, apabila berbilang pemilih digunakan pada elemen yang sama, pemilih yang mempunyai kekhususan tertinggi akan diambil keutamaan. Prinsip ini jelas dalam contoh di bawah, di mana pemilih menggunakan kedua-dua kelas dan kelas pseudo (.foo a:link) mengatasi pemilih lain yang hanya menggunakan kelas pseudo (cth., a:hover).

Memahami Kekhususan

Untuk menentukan pemilih yang mempunyai kekhususan tertinggi, pertimbangkan perkara berikut metrik:

• Gaya sebaris mempunyai kekhususan tertinggi (1)
• Pemilih id mempunyai kekhususan yang lebih tinggi daripada kelas, elemen atau pemilih universal (0)
• Kelas, elemen, atau pemilih universal mempunyai kekhususan yang sama (1)

Penjelasan tentang Contoh

Dalam kod HTML dan CSS yang diberikan, pemilih berikut digunakan pada elemen pautan dalam .foo div:

• .foo a:link, .foo a:dilawati (kekhususan yang lebih tinggi: kelas dan kelas pseudo)
• a:pautan, a:dilawati (kekhususan yang lebih rendah: sahaja pseudo-class)
• a:hover, a:active (kekhususan yang sama seperti .foo a:link)

Berdasarkan jadual kekhususan yang disediakan, .foo a:link mengatasi a :tuding kerana yang pertama mempunyai keutamaan yang lebih tinggi kerana kemasukan kelasnya.

Membetulkan Isu

Untuk membetulkan isu dan menjadikan pautan berlegar kelihatan merah, adalah perlu untuk mengubah suai pemilih .foo a:link untuk memastikan ia tidak mengatasi gaya yang ditakrifkan dalam a:hover. Satu pembetulan yang mungkin adalah menambah pemilih yang lebih khusus untuk tuding dalam konteks .foo:

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

Dengan memperkenalkan pemilih yang lebih khusus, ia mengambil keutamaan berbanding pemilih pautan .foo a:yang kurang spesifik, membenarkan tingkah laku tuding untuk memaparkan warna yang betul.

Atas ialah kandungan terperinci Mengapa Pemilih CSS Kelas dan Kelas Pseudo Mengatasi Pemilih Kelas Pseudo Sahaja pada Tuding?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!