So löschen Sie geerbte CSS-Stile

Der Einsatz von CSS-Vererbung und Stilbereinigung ist in der Webentwicklung unvermeidlich. Wenn Sie CSS verwenden, können Sie bestimmte Attributwerte durch Vererbung an andere Elemente vererben und so den Codeumfang und die Wartungskosten reduzieren. Manchmal müssen Sie jedoch die Vererbung löschen, um bessere Stileffekte zu erzielen.

1. CSS-Vererbung
1.1 Vererbungsregeln
In CSS sind einige Attributwerte vererbbar und diese Attributwerte können von untergeordneten Elementen geerbt werden. Zu diesen Eigenschaftswerten gehören Schriftart, Farbe, Textanordnung usw. Wenn ein untergeordnetes Element keinen entsprechenden Attributwert definiert, erbt es den Attributwert von seinem übergeordneten Element. Zum Beispiel:

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

h1 {
    font-size: 2rem;
}

Im obigen Beispiel erbt das Element h1 die font-family und color des body Code> Element > Attributwert. Da das Element <code>h1 diese Attributwerte nicht definiert, werden sie von seinem übergeordneten Element geerbt. 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 Missbrauch der Vererbung vermeiden

Obwohl CSS-Vererbung Code sparen und Wartungskosten senken kann, kann der Missbrauch der Vererbung zu unnötiger Stilvererbung führen und sogar negative Auswirkungen haben. Bei der Verwendung der Vererbung müssen Sie die folgenden Punkte beachten:

1.2.1 Nicht-universelle Attribute nicht als geerbte Attribute festlegen 🎜In CSS werden einige Attributwerte nicht vererbt, z. B. background-image , width, height usw. Diese Attributwerte sind ungültig, wenn sie als geerbte Attribute festgelegt sind und nicht von untergeordneten Elementen geerbt werden. 🎜🎜1.2.2 Machen Sie die Stylesheet-Struktur nicht zu komplex🎜Wenn die Stylesheet-Struktur zu komplex ist, kann dies dazu führen, dass die Vererbungskette zu lang wird, was dem Code unnötige Komplexität verleiht. Beim Schreiben von Stylesheets sollten Sie auf eine prägnante und klare Struktur achten und versuchen, Redundanzen zu vermeiden. Zum Beispiel: 🎜

h1 {
    font-size: 2rem;
}

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

🎜1.2.3 Definieren Sie nicht zu viele geerbte Eigenschaften. 🎜Legen Sie nur die erforderlichen Eigenschaften als geerbte Eigenschaften fest. Wenn Sie zu viele geerbte Eigenschaften definieren, wird es schwierig, den Code zu verwalten und das Layout zu verstehen. Erwägen Sie beim Definieren von CSS-Eigenschaften die Verwendung flexibler, einfacher Stile. 🎜🎜1.3 Verwendung der Vererbung🎜Obwohl der Missbrauch der Vererbung zu unnötiger Stilvererbung führen kann, ist die CSS-Vererbung bei richtiger Verwendung immer noch sehr nützlich. Im Folgenden sind einige Situationen aufgeführt, in denen Vererbung verwendet werden kann: 🎜🎜1.3.1 Schriftartattribute vereinheitlichen🎜 Sie können die Schriftartattribute für das body-Element festlegen und dann den Schriftartstil der gesamten Seite durchgängig machen Vererbung: 🎜rrreee🎜 1.3.2 Farbattribute vereinheitlichen🎜Farbe ist ein sehr wichtiges Attribut, das vererbt werden kann, um die Farbe der gesamten Seite konsistent zu machen. Zum Beispiel: 🎜rrreee🎜1.3.3 Einheitliche Textausrichtung🎜Durch Festlegen des Attributs text-align für ein gemeinsames übergeordnetes Element können Sie dafür sorgen, dass untergeordnete Elemente einer einheitlichen Textausrichtung folgen. Zum Beispiel: 🎜rrreee🎜 2. Stillöschung🎜In CSS müssen wir manchmal die Standardstile bestimmter Elemente löschen oder die festgelegten Stile löschen. Hier sind einige Methoden, die zum Löschen des Stils verwendet werden können: 🎜🎜2.1 Stylesheet zurücksetzen🎜 Sie können das Stylesheet zum Zurücksetzen verwenden, um den Standardstil zu löschen und den Standardstil aller Elemente auf den Basisstil zurückzusetzen. Hier ist der Code aus Eric Meyers Reset CSS (https://meyerweb.com/eric/tools/css/reset/): 🎜rrreee🎜 Fügen Sie den obigen Code am Anfang des CSS-Stylesheets ein, um die Standardstile aller Elemente zurückzusetzen . 🎜🎜2.2 Verwenden Sie unset zum Löschen. 🎜In CSS3 gibt es einen neuen Attributwert unset. unset kann den Vererbungseffekt einer bestimmten Attributeinstellung löschen, sodass das Element wieder den Standardwert des Attributs erhält. Zum Beispiel: 🎜rrreee🎜2.3 Verwenden Sie none zum Löschen 🎜Wenn Sie den Stil eines Elements aufheben müssen, können Sie den Wert none verwenden, zum Beispiel: 🎜rrreee🎜 2.4 Verwenden Sie !important, um 🎜!important zu löschen. Dies ist eine Möglichkeit, alle Prioritäten mit der höchsten Priorität zu überschreiben, wodurch geerbte Stile oder Stile mit demselben Prioritätssatz überschrieben werden können. Zum Beispiel: 🎜rrreee🎜2.5 Verwenden Sie inherit, um Stile zu überschreiben. 🎜Verwenden Sie das Attribut inherit, um einen Attributwert so festzulegen, dass er den Wert seines oberen Elements erbt und so den Stil von überschreibt das aktuelle Element. Zum Beispiel: 🎜rrreee🎜Fazit🎜 In der CSS-Entwicklung sind Vererbung und Stillöschung relativ häufige Techniken. Die richtige Verwendung kann die Wartbarkeit und Effizienz des Codes verbessern. Ein übermäßiger Missbrauch dieser Techniken führt jedoch dazu, dass der Code schwer zu warten und zu verstehen ist und sogar unnötige Fehler verursacht. Entwickler müssen die Vor- und Nachteile von Vererbung und Bereinigung abwägen, diese Techniken voll ausnutzen und unnötige Komplexität vermeiden. 🎜

Das obige ist der detaillierte Inhalt vonSo löschen Sie geerbte CSS-Stile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!