CSS meldet keinen Fehler

CSS meldet keine Fehler

CSS ist ein äußerst wichtiger Teil der Frontend-Entwicklung. Es ist für die Darstellung von Webseitenstilen verantwortlich. Als Frontend-Entwickler sind wir alle schon einmal auf eine solche Situation gestoßen: Es liegt offensichtlich kein Problem mit der CSS-Syntax vor, aber der Stil kann auf der Seite nicht korrekt angezeigt werden.

Diese Situation macht Entwickler normalerweise sehr verwirrt und verwirrt und verschwendet sogar viel Zeit, um das Problem zu lokalisieren. In diesem Artikel besprechen wir einige häufige Probleme, die dazu führen, dass CSS keine Fehler meldet, Stile jedoch nicht korrekt angezeigt werden können, und stellen einige Lösungen bereit, damit Leser diese Probleme schnell lösen können.

1. CSS-Selektor passt Elemente nicht richtig an

Beim Schreiben von CSS verwenden wir normalerweise Selektoren, um Elemente gezielt zu formatieren. Aber manchmal wählen wir möglicherweise den falschen Selektor oder verwenden falsche Selektoren zum Auffinden von Elementen, was dazu führt, dass CSS-Stile nicht korrekt angezeigt werden.

Zum Beispiel könnten wir einen Klassenselektor verwenden, um ein Element zu formatieren, das durch einen ID-Selektor gebunden ist, oder einen ID-Selektor verwenden, um ein Element zu formatieren, das durch einen Klassenselektor gebunden ist:

#my-class {
    color: red;
}

.my-id {
    font-size: 16px;
}

Ein auf diese Weise geschriebener CSS-Stil funktioniert nicht korrekt, da der Selektor das Element nicht korrekt zuordnen kann. Die korrekte Schreibweise sollte lauten:

#my-id {
    color: red;
}

.my-class {
    font-size: 16px;
}

2. CSS-Stile werden von anderen Stilen überschrieben

In Stylesheets definieren wir normalerweise mehrere Stile, aber diese Stile können sich gegenseitig beeinflussen, was dazu führt, dass einige Stile von anderen Stilen überschrieben werden. Diese Situation tritt normalerweise auf, wenn wir den Elementstil im Browser anzeigen und feststellen, dass der Stil falsch angezeigt wird oder nur ein Teil des Stils wirksam ist.

Zum Beispiel können wir mehrere Stile für dasselbe Element in einem Stylesheet definieren:

.my-class {
    color: red;
}

.my-class {
    font-size: 16px;
}

Ein auf diese Weise geschriebener Stil wird nur für die späteren Stile wirksam, während die vorherigen Stile von den späteren Stilen überschrieben werden. Die richtige Schreibweise besteht darin, einen Stil zu verwenden, um mehrere Attribute zu definieren:

.my-class {
    color: red;
    font-size: 16px;
}

3. CSS-Stil wird vererbt

Der CSS-Stil verfügt über einige Attribute, die von den untergeordneten Elementen des Elements geerbt werden können. Beispielsweise können die Attribute color und font-size von untergeordneten Elementen geerbt werden. Manchmal möchten wir nicht, dass untergeordnete Elemente bestimmte Stile erben, aber wir definieren diese Stile fälschlicherweise im übergeordneten Element des Elements, was dazu führt, dass die untergeordneten Elemente diese Stile erben, was zu einer falschen Seitenanzeige führt. color 和 font-size 属性就是可以被子元素所继承的。而有时候我们不希望子元素继承某些样式，但我们却错误地将这些样式定义在了元素的父元素上，导致子元素继承了这些样式，从而导致页面展现不正确。

例如，我们可能会在一个 div 中定义了一些样式，但这些样式却被其子元素所继承了：

div {
    color: red;
    font-size: 16px;
}

这样编写的样式，将会导致 div 内的所有子元素都继承了这些样式，包括文本和链接等。正确的写法应该是对每个元素单独定义样式，而不是定义在其父元素上。

4. CSS 样式属性被浏览器默认属性覆盖

浏览器的默认行为是会为一些 HTML 元素设置一些默认的样式属性，例如，ul

Zum Beispiel können wir einige Stile in einem Div definieren, aber diese Stile werden von seinen untergeordneten Elementen geerbt:

ul {
    margin: 0;
}

Auf diese Weise geschriebene Stile führen dazu, dass alle untergeordneten Elemente innerhalb des Div diese Stile erben, einschließlich Text und Links. usw. Die richtige Schreibweise besteht darin, den Stil für jedes Element separat zu definieren, anstatt ihn für das übergeordnete Element zu definieren.

CSS-Stilattribute werden durch Browser-Standardattribute überschrieben
Das Standardverhalten des Browsers besteht darin, einige Standardstilattribute für einige HTML-Elemente festzulegen, zum Beispiel ul Der Standardstil des Elements besteht darin, den linken Einzug des Listenelements und den Stil der Listenelementmarkierung festzulegen.
5. Manchmal versuchen wir möglicherweise, diese Standardattribute zu definieren, aber tatsächlich wurden diese Attribute durch die Standardwerte des Browsers überschrieben, was dazu führt, dass unsere Stile nicht korrekt angezeigt werden.

Zum Beispiel könnten wir versuchen, ein Randattribut für das ul-Element zu definieren, aber dieses Attribut wurde durch das Standardattribut des Browsers überschrieben:

ul {
    padding: 0;
    list-style: none;
}

Der auf diese Weise geschriebene Stil wird nicht korrekt angezeigt, da der Browser dies bereits festgelegt hat es für das ul-Element. Der richtige Weg, es zu schreiben, besteht darin, bestimmte CSS-Eigenschaften zu verwenden, um den Wert der Standardeigenschaft zu ändern: wird von anderen Stilen abgedeckt. Dies geschieht normalerweise, wenn wir CSS-Stile an der falschen Stelle schreiben oder das Stylesheet nicht richtig in die Vorlage einbinden.

Zum Beispiel definieren wir möglicherweise einen Stil im Kopf, aber dieser Stil wird nicht wirksam, weil wir das Stylesheet nicht korrekt in die Vorlage eingeführt haben:

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="my-class">Hello World!</div>
</body>

Die richtige Art, es zu schreiben, besteht darin, die Stylesheet-Referenz einzufügen im Kopf:

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="my-class">Hello World!</div>
</body>

🎜Die oben genannten Probleme führen dazu, dass CSS keine Fehler meldet, Stile jedoch nicht korrekt angezeigt werden. Wenn Sie auf diese Probleme stoßen, kann Ihnen dieser Artikel hoffentlich helfen. Abschließend empfehlen wir Ihnen dringend, beim Schreiben von CSS die Dokumentation und Spezifikationen sorgfältig zu lesen und Ihre Stylesheets rational zu organisieren und zu optimieren, damit Ihre Stile einfacher zu pflegen und zu erweitern sind. 🎜

Das obige ist der detaillierte Inhalt vonCSS meldet keinen Fehler. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!