Comment effacer les styles hérités du CSS

L'utilisation de l'héritage CSS et du nettoyage de style est inévitable dans le développement Web. Lorsque vous utilisez CSS, vous pouvez hériter de certaines valeurs d'attribut d'autres éléments via l'héritage, réduisant ainsi la quantité de code et les coûts de maintenance. Cependant, vous devez parfois effacer l'héritage pour obtenir de meilleurs effets de style ;

1. Héritage CSS
1.1 Règles d'héritage
En CSS, certaines valeurs d'attribut sont héritables, et ces valeurs d'attribut peuvent être héritées par les éléments enfants. Ces valeurs de propriété incluent la police, la couleur, la disposition du texte, etc. Lorsqu'un élément enfant ne définit pas de valeur d'attribut correspondante, il héritera de la valeur d'attribut de son élément parent. Par exemple :

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

h1 {
    font-size: 2rem;
}

Dans l'exemple ci-dessus, l'élément h1 hérite du font-family et du color du body code> élément >Valeur de l'attribut. Étant donné que l'élément <code>h1 ne définit pas ces valeurs d'attribut, il sera hérité de son élément parent. h1元素继承了body元素的font-family和color属性值。因为h1元素没有定义这些属性值，所以会从其上层元素继承。

1.2 避免滥用继承
尽管 CSS 继承可以节省代码、减少维护成本，但是滥用继承可能会导致不必要的样式继承，甚至造成不良影响。在使用继承时，需要注意以下几点：

1.2.1 不要将非通用属性设置为继承属性
在 CSS 中，有些属性值不具有继承性，如background-image、width、height等。这些属性值设置为继承属性无效，不会被子元素所继承。

1.2.2 不要将样式表结构过于复杂
如果样式表的结构过于复杂，可能会导致继承链条过长，增加了代码的不必要复杂性。在编写样式表时，应注意保持简洁明了的结构，尽量避免冗余。例如：

/* 不推荐 */
.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 不要定义过多的继承属性
仅将必要的属性设置为继承属性，如果定义过多的继承属性会让代码难以维护、布局难以理解。在定义 CSS 属性时，需要考虑使用灵活、简单的样式。

1.3 使用继承
虽然滥用继承会导致不必要的样式继承，但是当使用得当时，CSS 继承还是非常有用的。以下是一些情况下可以使用继承：

1.3.1 统一字体属性
可以将字体属性设置在body元素上，然后通过继承使整个页面的字体风格保持一致：

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

1.3.2 统一颜色属性
颜色是很重要的一个属性，可以通过继承来使整个页面的颜色保持一致。例如：

body {
    color: #333;
}

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

1.3.3 统一文本对齐方式
通过将text-align属性设置在一个共同的父元素上，可以使子元素遵循统一的文本对齐方式。例如：

body {
    text-align: center;
}

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

二、样式清除
在 CSS 中，有时候我们需要清除掉某些元素的默认样式，或取消已经设置好的样式。以下是一些可用于样式清除的方法：

2.1 重置样式表
可以使用重置样式表来清除默认样式，将所有元素的默认样式重置为基础样式。以下是 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;
}

将上述代码插入到 CSS 样式表的开头，即可重置所有元素的默认样式。

2.2 使用 unset 进行清除
在 CSS3 中，有一种新的属性值unset。unset可以清除某个属性设置的继承效果，使元素重新获得该属性的默认值。例如：

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

2.3 使用 none 进行清除
当需要取消某个元素样式时，可以使用none值，例如：

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

2.4 使用 !important 进行清除
!important是一种以最高优先级覆盖所有优先级的方式，可以覆盖继承的样式或设置了相同优先级的样式。例如：

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

2.5 使用 inherit 覆盖样式
使用inherit

1.2 Évitez d'abuser de l'héritage

Bien que l'héritage CSS puisse économiser du code et réduire les coûts de maintenance, l'abus de l'héritage peut conduire à un héritage de style inutile et même avoir des effets néfastes. Lorsque vous utilisez l'héritage, vous devez faire attention aux points suivants :

1.2.1 Ne définissez pas d'attributs non universels comme attributs hérités 🎜En CSS, certaines valeurs d'attribut ne sont pas héritées, comme background-image , largeur, hauteur, etc. Ces valeurs d'attribut ne sont pas valides si elles sont définies comme attributs hérités et ne seront pas héritées par les éléments enfants. 🎜🎜1.2.2 Ne rendez pas la structure de la feuille de style trop complexe🎜Si la structure de la feuille de style est trop complexe, la chaîne d'héritage peut être trop longue, ajoutant une complexité inutile au code. Lorsque vous rédigez des feuilles de style, vous devez veiller à maintenir une structure concise et claire et essayer d’éviter les redondances. Par exemple : 🎜

h1 {
    font-size: 2rem;
}

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

🎜1.2.3 Ne définissez pas trop de propriétés héritées🎜Définissez uniquement les propriétés nécessaires comme propriétés héritées. Définir trop de propriétés héritées rendra le code difficile à maintenir et la mise en page difficile à comprendre. Lors de la définition des propriétés CSS, pensez à utiliser des styles simples et flexibles. 🎜🎜1.3 Utiliser l'héritage🎜Bien qu'une mauvaise utilisation de l'héritage puisse conduire à un héritage de style inutile, l'héritage CSS reste très utile lorsqu'il est utilisé correctement. Voici quelques situations dans lesquelles l'héritage peut être utilisé : 🎜🎜1.3.1 Unifier les attributs de police🎜 Vous pouvez définir les attributs de police sur l'élément body, puis rendre le style de police de la page entière cohérent via héritage : 🎜rrreee🎜 1.3.2 Unifier les attributs de couleur🎜La couleur est un attribut très important, qui peut être hérité pour rendre la couleur de toute la page cohérente. Par exemple : 🎜rrreee🎜1.3.3 Alignement de texte unifié🎜En définissant l'attribut text-align sur un élément parent commun, vous pouvez faire en sorte que les éléments enfants suivent un alignement de texte unifié. Par exemple : 🎜rrreee🎜 2. Effacement des styles🎜En CSS, nous devons parfois effacer les styles par défaut de certains éléments, ou annuler les styles qui ont été définis. Voici quelques méthodes que vous pouvez utiliser pour effacer le style : 🎜🎜2.1 Réinitialiser la feuille de style🎜 Vous pouvez utiliser la feuille de style de réinitialisation pour effacer les styles par défaut, en réinitialisant les styles par défaut de tous les éléments au style de base. Voici le code de Reset CSS d'Eric Meyer (https://meyerweb.com/eric/tools/css/reset/) : 🎜rrreee🎜 Insérez le code ci-dessus au début de la feuille de style CSS pour réinitialiser les styles par défaut de tous les éléments . 🎜🎜2.2 Utilisez unset pour effacer 🎜Dans CSS3, il y a une nouvelle valeur d'attribut unset. unset peut effacer l'effet d'héritage d'un certain paramètre d'attribut, de sorte que l'élément retrouve la valeur par défaut de l'attribut. Par exemple : 🎜rrreee🎜2.3 Utilisez aucun pour effacer 🎜Lorsque vous devez annuler le style d'un élément, vous pouvez utiliser la valeur aucun, par exemple : 🎜rrreee🎜 2.4 Utilisez ! important pour effacer 🎜!important est un moyen de remplacer toutes les priorités ayant la priorité la plus élevée, ce qui peut remplacer les styles hérités ou les styles avec le même ensemble de priorités. Par exemple : 🎜rrreee🎜2.5 Utilisez inherit pour remplacer les styles 🎜Utilisez l'attribut inherit pour définir une valeur d'attribut pour hériter de la valeur de son élément supérieur, remplaçant ainsi le style de l'élément courant. Par exemple : 🎜rrreee🎜Conclusion🎜 Dans le développement CSS, l'héritage et la suppression de style sont des techniques relativement courantes. Une utilisation appropriée peut améliorer la maintenabilité et l'efficacité du code. Cependant, un abus excessif de ces techniques rendra le code difficile à maintenir et à comprendre, et provoquera même des erreurs inutiles. Les développeurs doivent peser le pour et le contre de l’héritage et du nettoyage, tirer pleinement parti de ces techniques et éviter toute complexité inutile. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!