Bagaimana untuk Mencegah Pewarisan CSS daripada Elemen Induk?-tutorial css-php.cn

Bagaimana untuk Mencegah Pewarisan CSS daripada Elemen Induk?

Barbara Streisand

Lepaskan： 2024-11-26 06:47:12

asal

578 orang telah melayarinya

How to Prevent CSS Inheritance from Parent Elements?

Pewarisan dan Penggantian CSS

Dalam keadaan tertentu, elemen anak mungkin perlu dihalang daripada mewarisi gaya yang diwarisi daripada elemen induknya. Walaupun tiada sifat CSS khusus untuk mencapai ini, adalah mungkin untuk mengembalikan perubahan gaya secara manual atau menambah kelas tambahan untuk menentukan penggayaan yang lebih khusus.

Sebagai contoh, pertimbangkan HTML dan CSS berikut:

HTML:

<body>
 <div>

Salin selepas log masuk

CSS:

form div {font-size: 12px; font-weight: bold;}
div.content
{
 /* Can anything go here? */
}

Salin selepas log masuk

Dalam keadaan biasa, teks menyekat "Kandungan perenggan" dan "Kandungan rentang" akan mewarisi saiz dan berat fon daripada elemen "form div" induk, menyebabkan kedua-dua teks menjadi tebal dan 12px.

Untuk mengelakkan pewarisan dan had ini penggayaan kepada hanya "Kandungan perenggan", seseorang boleh mengembalikan perubahan gaya secara manual:

div { color: green; }

form div { color: red; }

form div div.content { color: green; }

Salin selepas log masuk

Sebagai alternatif, jika mungkin, menambah kelas tambahan pada penanda boleh memberikan penggayaan yang lebih tepat:

<form div.sub { color: red; }

form div div.content { /* remains green */ }

Salin selepas log masuk

Versi terkini penyemak imbas moden kini menyokong sifat "revert" untuk mengembalikan warisan secara eksplisit pada elemen tertentu:

div.content {
  all: revert;
}

Salin selepas log masuk

Ini membolehkan penggantian penggayaan yang lebih ringkas dan fleksibel.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Pewarisan CSS daripada Elemen Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!