gaya css tidak diwarisi

CSS ialah alat yang sangat penting dalam reka bentuk web. Ia menyediakan pelbagai gaya untuk mencantikkan halaman web, dengan itu meningkatkan pengalaman pengguna laman web. Walau bagaimanapun, kadangkala dalam CSS, kami menghadapi beberapa masalah yang lebih sukar. Salah satu masalah ialah gaya CSS tidak diwarisi.

Apakah gaya CSS yang tidak diwarisi?

Ringkasnya, gaya CSS tidak diwarisi apabila kami menetapkan gaya di bawah pemilih, tetapi gaya ini tidak akan diwarisi ke dalam elemen anak pemilih. Keadaan ini sering menjadikan reka bentuk web amat sukar. Sebagai contoh, katakan kita ingin menetapkan saiz fon untuk teks kandungan keseluruhan tapak web, tetapi jika saiz fon elemen kanak-kanak di bawah pemilih telah ditetapkan, maka semua elemen kanak-kanak di bawah pemilih tidak akan mewarisi saiz fon . Ini memerlukan kami menetapkan semula saiz fon dalam setiap sub-elemen, yang sangat menyusahkan dan tidak kondusif untuk penyelenggaraan kod.

Sebab gaya CSS tidak diwarisi

Biasanya, gaya CSS tidak diwarisi atas sebab berikut:

1. Menggunakan sifat CSS khas

Sesetengah sifat CSS tidak menyokong warisan. Contohnya, sifat CSS seperti paparan, kedudukan, apungan dan jelas tidak menyokong warisan. Jika atribut ini digunakan dalam pemilih, semua elemen anak di bawah pemilih tidak akan mewarisi gaya.

2. Elemen anak mewarisi gaya elemen induk tetapi diubah

Kadangkala, menetapkan gaya baharu dalam elemen kanak-kanak akan menyebabkan gaya itu tidak lagi diwarisi daripada unsur induk. Ini biasanya kerana gaya baharu bercanggah dengan gaya yang diwarisi, menyebabkan gaya yang diwarisi akan ditindih.

3. Elemen kanak-kanak ditafsirkan sebagai elemen adik beradik melalui peraturan pemilih

Jika peraturan pemilih elemen kanak-kanak ditafsirkan sebagai elemen adik-beradik, bukannya anak kepada elemen elemen induk , maka gaya itu tidak akan diwarisi. Contohnya, jika anda menggunakan + atau ~ untuk memilih elemen adik-beradik dalam helaian gaya, gaya tersebut tidak akan diwarisi.

Cara menyelesaikan masalah gaya CSS yang tidak diwarisi

1. Gunakan pemilih global

Gunakan pemilih global untuk memaksa elemen anak mewarisi gaya unsur induk. Seperti yang ditunjukkan di bawah:

Gaya elemen induk:

.parent-element {
  font-size: 16px;
}

Gaya elemen kanak-kanak:

.child-element {
  all: initial;
  font-size: inherit;
}

Dalam gaya elemen kanak-kanak, kami menggunakan semua: permulaan untuk menetapkan semula semua gaya Tetapkannya kepada nilai lalai, dan kemudian gunakan font-size: inherit untuk mewarisi saiz fon elemen induk.

2. Gunakan sifat CSS dengan pewarisan yang lebih baik

Sesetengah sifat CSS menyokong pewarisan ia boleh ditetapkan sekali oleh elemen induk, tetapi elemen anak akan mewarisi nilai ini secara automatik. Contohnya, sifat CSS seperti warna, saiz fon dan keluarga fon semuanya menyokong warisan. Jika kita menggunakan atribut ini dalam pemilih, maka elemen anak boleh mewarisi atribut ini.

3. Kurangkan sarang pemilih

Mengelakkan sarang pemilih boleh mengelakkan masalah pewarisan unsur anak. Apabila menulis gaya CSS, anda harus cuba menggunakan pemilih mudah dan mengelakkan pemilih bersarang.

4. Tambah !penting

Apabila gaya bercanggah Gunakan !penting pada penghujung untuk memastikan gaya ini mempunyai keutamaan tertinggi, sekali gus mengatasi gaya lain.

Ringkasan

Dalam CSS, gaya yang tidak diwarisi mungkin menyusahkan reka bentuk web. Walau bagaimanapun, selagi kita menguasai beberapa kemahiran dan kaedah, kita boleh menyelesaikan masalah ini dengan mudah. Menggunakan pemilih global, menggunakan sifat CSS dengan warisan yang lebih baik, mengurangkan sarang pemilih dan menggunakan !important adalah kaedah biasa untuk menangani masalah bukan warisan gaya CSS.

Atas ialah kandungan terperinci gaya css tidak diwarisi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!