Bagaimana Mengatasi Gaya CSS Laman Web dengan CSS Tersuai Menggunakan Kekhususan?

Mengatasi Gaya CSS Laman Web dengan CSS Tersuai

Tapak web anda terdiri daripada tiga fail CSS yang disertakan secara automatik dan anda tidak mempunyai akses kepada fail index.html. Walau bagaimanapun, anda mempunyai kawalan ke atas fail CSS tapak web dan berhasrat untuk mencipta fail CSS baharu untuk menggantikan fail sedia ada.

Walaupun menggunakan @import url(css4.css) mungkin merupakan percubaan pertama anda, ia gagal untuk mengatasi penggayaan fail CSS terakhir. Isu ini berpunca daripada konsep "Kekhususan CSS."

Kekhususan CSS

Kekhususan CSS menentukan keutamaan pengisytiharan gaya pada elemen. Ia terdiri daripada empat komponen:

• Sebaris: Gaya digunakan terus pada elemen
• Id: Gaya digunakan pada elemen dengan ID
• Kelas: Gaya digunakan pada elemen dengan kelas
• Elemen: Gaya digunakan pada mana-mana tika jenis elemen tertentu

Berat setiap komponen diwakili dalam format berikut: sebaris | id | kelas | unsur. Lebih tinggi berat dalam mana-mana lajur, lebih tinggi kekhususan.

Menyelesaikan Konflik Kekhususan

Untuk mengatasi gaya CSS sedia ada, anda mesti memastikan bahawa CSS baharu anda mempunyai kekhususan yang lebih tinggi daripada gaya bercanggah. Sebagai contoh, jika CSS sedia ada menggunakan pemilih kelas, anda mesti menggunakan ID atau pemilih sebaris dalam CSS tersuai anda.

Memecahkan Contoh Kekhususan

Kod yang disediakan menggambarkan kekhususan CSS dalam tindakan :

<code class="css">body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
#id {background-color: green}
.class {background-color: yellow }
section {background-color: blue }
.inline {background-color: purple !IMPORTANT }</code>

dengan gaya sebaris warna latar belakang: merah akan kelihatan ungu walaupun gaya sebaris mempunyai kekhususan yang lebih tinggi (1|0|0|0). Ini kerana CSS tersuai menetapkan !penting pada kelas .inline, yang menunjukkan bahawa gayanya harus mengatasi semua yang lain.

Kesimpulan

Memahami kekhususan CSS membolehkan anda mengawal pembentangan tapak web anda dengan tepat elemen. Dengan sengaja menggunakan nilai kekhususan yang lebih tinggi, anda boleh dengan mudah mengatasi gaya CSS sedia ada dan membuat reka bentuk tersuai tanpa perlu mengedit fail index.html asal.

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