Bagaimanakah Pesanan Stylesheet Menentukan CSS Mengatasi Keutamaan?

Styleseet Override Order dalam CSS

Dalam HTML, stylesheet boleh dipautkan dalam pengepala untuk menggunakan gaya tertentu pada halaman web. Susunan helaian gaya ini menentukan gaya yang diutamakan. Dalam senario yang diterangkan, dua helaian gaya dipautkan: styles.css dan master.css.

Tertib penggantian mengikut peraturan melata CSS. Peraturan "baris terakhir" dalam CSS menentukan bahawa nilai yang diisytiharkan terakhir bagi sesuatu harta diutamakan daripada semua pengisytiharan sebelumnya. Walau bagaimanapun, peraturan ini hanya terpakai dalam satu lembaran gaya. Apabila ia melibatkan berbilang lembaran gaya, peraturan berikut dikenakan:

Rujukan Lata dan Lembaran Gaya

Elemen melata CSS tidak berfungsi secara sama untuk rujukan helaian gaya seperti yang dilakukan untuk fungsi CSS biasa. Dari segi rujukan lembaran gaya, susunan lembaran gaya dipautkan menentukan keutamaan. Helaian gaya pautan terakhir mengatasi sebarang peraturan yang bercanggah dalam helaian gaya yang dipautkan sebelum ini.

Kekhususan dan !penting

Kekhususan peraturan CSS mentakrifkan beratnya. Peraturan dengan kekhususan yang lebih tinggi diutamakan daripada peraturan dengan kekhususan yang lebih rendah. Kekhususan ditentukan oleh bilangan ID, kelas dan nama elemen yang digunakan dalam pemilih. Perisytiharan !penting juga boleh digunakan untuk mengatasi peraturan lain.

Contoh

Dalam senario yang diberikan, master.css dipautkan selepas styles.css. Dengan mengandaikan kedua-dua helaian gaya mengandungi peraturan untuk elemen badan, peraturan dalam master.css akan mengatasi peraturan dalam styles.css atas sebab berikut:

• master.css dipautkan terakhir.
• master.css mengandungi peraturan yang lebih khusus (cth., html, body:not(input="button")) yang mengatasi peraturan yang lebih umum dalam styles.css (cth., badan).

Atas ialah kandungan terperinci Bagaimanakah Pesanan Stylesheet Menentukan CSS Mengatasi Keutamaan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!