Bagaimana Mengatasi Gaya CSS Laman Web dengan CSS Tersuai Menggunakan Kekhususan?-tutorial css-php.cn

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

DDD

Lepaskan： 2024-10-24 14:09:02

asal

339 orang telah melayarinya

How to Override Website CSS Styles with Custom CSS Using Specificity?

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>

Salin selepas log masuk

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!