Bagaimana untuk Mengatasi CSS Laman Web Menggunakan Fail CSS Baharu dengan Kekhususan Lebih Tinggi?

Bagaimanakah Saya Boleh Mengatasi Fail CSS Tapak Web Menggunakan Fail CSS Baharu?

Cabaran:

Anda mempunyai tapak web dengan berbilang fail CSS, tetapi anda kekurangan akses kepada kod sumber. Anda berhasrat untuk mencipta fail CSS baharu yang mengatasi gaya sedia ada tanpa keupayaan untuk mengubah suai fail index.html.

Penyelesaian:

Memahami Kekhususan CSS :

Untuk mengatasi gaya sedia ada, anda perlu memahami konsep kekhususan CSS. Kekhususan menentukan gaya yang digunakan pada elemen berdasarkan pemilih yang digunakan. Ia dikira sebagai gabungan kiraan jenis pemilih yang berbeza (sebaris, ID, kelas, elemen).

Gunakan Pemilih yang Lebih Spesifik:

Untuk memastikan anda sendiri Fail CSS diutamakan, gunakan pemilih dengan kekhususan yang lebih tinggi daripada pemilih dalam fail CSS semasa. Contohnya, pemilih seperti ".myClass" mempunyai kekhususan 0/0/1/0 dan akan mengatasi pemilih seperti "div" dengan kekhususan 0/0/0/1.

Menggunakan Kekhususan:

Bayangkan senario berikut:

• currentCSS1.css mempunyai peraturan untuk badan (kekhususan: 0/0/0/1)
• currentCSS2.css mempunyai peraturan untuk .myClass (specificity: 0/0/1/0)
• newCSS4.css mempunyai peraturan untuk .myClass (specificity: 0/0/2/0)

Berdasarkan peraturan kekhususan CSS, gaya yang ditakrifkan dalam newCSS4.css akan mengatasi gaya dalam currentCSS1.css dan currentCSS2.css untuk elemen dengan kelas .myClass.

Awas dengan !important:

Walaupun menggunakan !important boleh memaksa gaya untuk diutamakan, ia biasanya tidak digalakkan untuk CSS seluruh tapak. Gunakannya hanya untuk CSS khusus halaman atau untuk mengatasi CSS luaran.

Kekhususan Pengiraan:

Rujuk hierarki berikut untuk mengira kekhususan:

• Sebaris (1|0|0|0)
• ID (0|1|0|0)
• Kelas (0|0|1|0)
• Elemen (0|0|0|1)

Nombor tertinggi di sebelah kiri diutamakan.

Contoh:

Andaikan fail CSS semasa anda mempunyai peraturan berikut:

<code class="css">body { margin: 0; }
#header { background: blue; }</code>

Untuk mengatasi peraturan ini menggunakan fail CSS baharu, anda boleh menggunakan pemilih berikut:

<code class="css">#header.myClass {
  margin: 1em;
  background: red;
}</code>

Pemilih #header.myClass mempunyai kekhususan 0/1/1/1, yang mengatasi kedua-dua peraturan dalam fail CSS semasa.

Atas ialah kandungan terperinci Bagaimana untuk Mengatasi CSS Laman Web Menggunakan Fail CSS Baharu dengan Kekhususan Lebih Tinggi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!