Cara mengosongkan gaya warisan css

Penggunaan warisan CSS dan pembersihan gaya tidak dapat dielakkan dalam pembangunan web. Apabila menggunakan CSS, anda boleh mewarisi nilai atribut tertentu kepada elemen lain melalui pewarisan, dengan itu mengurangkan jumlah kod dan kos penyelenggaraan walau bagaimanapun, kadangkala anda perlu mengosongkan warisan untuk mencapai kesan gaya yang lebih baik.

1. CSS Inheritance
1.1 Inheritance Rules
Dalam CSS, terdapat beberapa nilai atribut yang diwarisi, dan nilai atribut ini boleh diwarisi oleh elemen anak. Nilai sifat ini termasuk fon, warna, susunan teks, dsb. Apabila elemen anak tidak mentakrifkan nilai atribut yang sepadan, ia akan mewarisi nilai atribut daripada elemen induknya. Contohnya:

body {
    font-family: Arial, sans-serif;
    color: #333;
}

h1 {
    font-size: 2rem;
}

Dalam contoh di atas, elemen h1 mewarisi nilai atribut body dan font-family bagi elemen color. Oleh kerana elemen h1 tidak mentakrifkan nilai atribut ini, ia akan diwarisi daripada elemen induknya.

1.2 Elakkan menyalahgunakan warisan
Walaupun warisan CSS boleh menjimatkan kod dan mengurangkan kos penyelenggaraan, menyalahgunakan warisan boleh membawa kepada warisan gaya yang tidak perlu dan juga menyebabkan kesan buruk. Apabila menggunakan warisan, anda perlu memberi perhatian kepada perkara berikut:

1.2.1 Jangan tetapkan atribut bukan universal sebagai atribut yang diwarisi
Dalam CSS, beberapa nilai atribut tidak diwarisi, seperti background-image, width, height, dsb. Nilai atribut ini tidak sah jika ia ditetapkan sebagai atribut yang diwarisi dan tidak akan diwarisi oleh elemen anak.

1.2.2 Jangan jadikan struktur helaian gaya terlalu rumit
Jika struktur helaian gaya terlalu kompleks, ia boleh menyebabkan rantaian warisan menjadi terlalu panjang, menambah kerumitan yang tidak perlu pada kod. Apabila menulis helaian gaya, anda harus memberi perhatian untuk mengekalkan struktur yang ringkas dan jelas dan cuba mengelakkan lebihan. Contohnya:

/* 不推荐 */
.wrapper > .box > .title {
    font-size: 1.2rem;
}
.wrapper > .box > .content {
    font-size: 1rem;
}

/* 推荐 */
.title {
    font-size: 1.2rem;
}
.content {
    font-size: 1rem;
}

1.2.3 Jangan tentukan terlalu banyak sifat yang diwarisi
Hanya tetapkan sifat yang diperlukan sebagai sifat yang diwarisi Menentukan terlalu banyak sifat yang diwarisi akan menyukarkan kod untuk dikekalkan dan reka letak sukar untuk dilakukan faham . Apabila mentakrifkan sifat CSS, pertimbangkan untuk menggunakan gaya yang fleksibel dan ringkas.

1.3 Menggunakan warisan
Walaupun penyalahgunaan warisan boleh membawa kepada warisan gaya yang tidak perlu, warisan CSS masih sangat berguna apabila digunakan dengan betul. Berikut ialah beberapa situasi di mana warisan boleh digunakan:

1.3.1 Menyatukan atribut fon
Anda boleh menetapkan atribut fon pada elemen body dan kemudian menjadikan gaya fon keseluruhan halaman konsisten melalui pewarisan:

body {
    font-family: Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
}

1.3.2 Atribut warna bersatu
Warna ialah atribut yang sangat penting dan boleh diwarisi untuk memastikan warna keseluruhan halaman konsisten. Contohnya:

body {
    color: #333;
}

h1, h2, h3 {
    color: inherit; /* 继承父元素的颜色 */
}

1.3.3 Penjajaran teks bersatu
Dengan menetapkan atribut text-align pada elemen induk biasa, elemen anak boleh dibuat mengikut penjajaran teks bersatu. Contohnya:

body {
    text-align: center;
}

h1, h2, h3 {
    text-align: left; /* 继承父元素的文本对齐方式 */
}

2. Pembersihan Gaya
Dalam CSS, kadangkala kita perlu mengosongkan gaya lalai elemen tertentu atau membatalkan gaya yang telah ditetapkan. Berikut ialah beberapa kaedah yang boleh digunakan untuk mengosongkan gaya:

2.1 Tetapkan semula helaian gaya
Anda boleh menggunakan helaian gaya tetapan untuk mengosongkan gaya lalai dan menetapkan semula gaya lalai semua elemen kepada gaya asas . Berikut ialah kod daripada Eric Meyer's Reset CSS (https://meyerweb.com/eric/tools/css/reset/):

/* Reset CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

Masukkan kod di atas pada permulaan lembaran gaya CSS untuk menetapkan semula ia Tetapkan gaya lalai untuk semua elemen.

2.2 Gunakan unset untuk mengosongkan
Dalam CSS3, terdapat nilai hartanah baharu unset. unsetAnda boleh mengosongkan kesan pewarisan tetapan atribut tertentu supaya elemen memperoleh semula nilai lalai atribut tersebut. Contohnya:

a {
    color: inherit;
    text-decoration: none;
    outline: none;
    background-color: unset; /* 取消已经设置好的颜色 */
}

2.3 Gunakan none untuk mengosongkan
Apabila anda perlu membatalkan gaya elemen, anda boleh menggunakan nilai none, contohnya:

input[type="checkbox"] {
    -webkit-appearance: none; /* 取消浏览器默认外观 */
    appearance: none;
}

2.4 Gunakan !important Pembersihan
!important ialah cara mengatasi semua keutamaan dengan keutamaan tertinggi, mengatasi gaya atau gaya yang diwarisi yang mempunyai set keutamaan yang sama. Contohnya:

p {
    color: #333 !important; /* 覆盖其它可能已经设定的颜色值 */
}

2.5 Gunakan inherit untuk mengatasi gaya
Gunakan atribut inherit untuk menetapkan nilai atribut untuk mewarisi nilai elemen atasnya, sekali gus mengatasi gaya semasa unsur. Contohnya:

h1 {
    font-size: 2rem;
}

h2 {
    font-size: inherit; /* 继承 h1 的 font-size 属性 */
}

Kesimpulan
Dalam pembangunan CSS, pewarisan dan pembersihan gaya adalah teknik yang agak biasa Penggunaan yang betul boleh meningkatkan kebolehselenggaraan dan kecekapan kod. Walau bagaimanapun, penyalahgunaan teknik ini yang berlebihan akan menjadikan kod sukar untuk dikekalkan dan difahami, malah menyebabkan ralat yang tidak perlu. Pembangun perlu menimbang kebaikan dan keburukan warisan dan pembersihan, memanfaatkan sepenuhnya teknik ini dan mengelakkan kerumitan yang tidak perlu.

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