Mengapa Pemilih Kelas Mengatasi Gaya Kelas Pseudo Pautan dalam CSS?

Mengapa Pemilih .foo Mengatasi Spesifikasi Gaya Pautan?

CSS menggunakan gaya berdasarkan peraturan kekhususan. Dalam kod sampel, kami mentakrifkan pautan, dilawati, tuding dan keadaan aktif dengan kekhususan yang sama (0 0 1 1). Walau bagaimanapun, pemilih .foo memperkenalkan kelas tambahan dengan kekhususan sedikit lebih tinggi (0 0 2 1).

Mekanisme Override

Apabila berbilang pemilih dengan tahap kekhususan berbeza digunakan untuk elemen yang sama, pemilih dengan kekhususan tertinggi mengatasi yang kekhususan rendah. Di sini, .foo a:link dan .foo a:visited mempunyai kekhususan yang lebih tinggi daripada a:hover dan a:active.

Oleh itu, pemilih .foo mengatasi pautan dan pemilih kelas pseudo dinamik, menyebabkan pautan dengan kelas .foo untuk kelihatan hijau tanpa mengira gaya lain yang digunakan.

Mungkin Membetulkan

Untuk memastikan keadaan tuding mengatasi pemilih .foo, seseorang boleh:

1. Tambah Pemilih .foo yang Lebih Spesifik

   Tingkatkan kekhususan pemilih .foo dengan menambahkan kelas lain. Contohnya:

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

   Ini memastikan kelas .link mengatasi pemilih .foo, membenarkan keadaan tuding berkuat kuasa.

2. Gunakan !Pengisytiharan penting

   Paksa pautan dan gaya tuding untuk mengatasi .foo pemilih menggunakan pengisytiharan !penting:

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

   Ini secara berkesan "mengunci" sifat warna, menghalang pemilih lain daripada mengubah suainya.

Atas ialah kandungan terperinci Mengapa Pemilih Kelas Mengatasi Gaya Kelas Pseudo Pautan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!