Bagaimanakah Pesanan Menggantikan Lembaran Gaya CSS Berfungsi?

Tempahan Penggantian Lembaran Gaya CSS: Disahkan

Dalam pengepala HTML, berbilang lembaran gaya boleh dirujuk, menimbulkan persoalan tentang susunan yang digunakan keutamaan. Artikel ini meneroka sifat melata lembaran gaya CSS untuk menjelaskan cara penggantian berfungsi.

Dalam contoh yang disediakan, pengepala menyertakan rujukan kepada "styles.css" dan "master.css." Yang terakhir mengatasi yang pertama seperti yang muncul kemudian dalam lata. Walau bagaimanapun, kekhususan juga memainkan peranan.

Menurut peraturan cascading CSS, peraturan yang lebih khusus mengatasi peraturan yang lebih umum. Pertimbangkan perkara berikut:

body { margin:10px; }

Peraturan ini menggunakan margin 10px pada semua elemen. Walau bagaimanapun, peraturan yang lebih khusus berikut:

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

Peraturan ini mengatasi peraturan sebelumnya kerana ia menyasarkan elemen tertentu (html dan kandungan) dan mengecualikan butang input. Memandangkan peraturan ini muncul kemudian dalam lata dan lebih khusus, ia diutamakan.

Adalah penting untuk ambil perhatian bahawa kekhususan dikira berdasarkan faktor seperti bilangan ID, kelas dan nama elemen yang digunakan dalam pemilih. Selain itu, pengisytiharan !penting boleh mengatasi semua peraturan lain.

Dengan memahami sifat melata dan kekhususan helaian gaya CSS, pembangun boleh memastikan reka bentuk mereka dipaparkan seperti yang dimaksudkan. Rujuk spesifikasi W3C (http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade) untuk butiran mendalam tentang keutamaan peraturan.

Atas ialah kandungan terperinci Bagaimanakah Pesanan Menggantikan Lembaran Gaya CSS Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!