CSS-Stil funktioniert nicht (die umfassendste Lösungszusammenfassung der Geschichte)

Beim Schreiben von Seiten stellen wir manchmal fest, dass die von uns geschriebenen CSS-Stile nicht wirksam sind. Für dieses Phänomen gibt es viele Gründe. Hier sind einige häufige Gründe, die Ihnen hoffentlich weiterhelfen. Sie können gerne im Kommentarbereich etwas hinzufügen.

Probleme mit dem Browser-Cache

Wenn Sie Ihren Code mehrfach geprüft haben und der Meinung sind, dass er in Ordnung ist, liegt möglicherweise ein Problem mit dem Browser-Cache vor. Versuchen Sie vor der Fehlerbehebung, den Browser-Cache zu leeren, den Browser neu zu starten oder den Browser zu wechseln. Wenn das nicht funktioniert, führen Sie weitere Fehlerbehebungen durch. Möglicherweise haben Sie nichts falsch gemacht und das Problem liegt nur am Cache oder am Browser. Ein Zurücksetzen kann das Problem lösen.

Verwenden Sie die „F12“-Elementprüfung des Browsers, um zu sehen, welche Stile nicht angewendet werden.

Details

Der Attributname ist falsch geschrieben, sodass er nicht mit dem HTML übereinstimmen kann, oder der Attributwert entspricht nicht der Spezifikation.

Die HTML-Tags sind nicht vollständig geschrieben, beispielsweise fehlen "<" oder ">";

，；｛｝ Überprüfen Sie, ob diese Symbole versehentlich in Chinesisch oder in Symbolen voller Breite verwendet werden.

Der CSS-Stil <span> funktioniert nicht: Um beispielsweise „span“ so zu definieren, dass es zentriert wird, müssen Sie „span“ zuerst zu einem Element auf Blockebene machen, d. h. zuerst display:block; -Attribut von span definieren und dann margin:0px auto;

In der Mitte des CSS-Stils steht kein Semikolon;
Warum verwenden CSS-Stile manchmal Semikolons und manchmal Leerzeichen?
Trennen Sie beim Festlegen derselben Eigenschaft diese durch Leerzeichen, z. B. „border:1px solid red“. Trennen Sie beim Festlegen unterschiedlicher Eigenschaften diese durch Semikolons, z. B. „width:300px;height:300px“.

Probleme mit der Stylesheet-Zuordnung

Wenn Ihr Stil völlig wirkungslos ist, bestätigen Sie zunächst, ob das Stylesheet zugeordnet ist oder ob der zugeordnete Stilspeicherort und -name korrekt sind.

<link rel="stylesheet" type="text/css" href="mycss.css"/>

Überprüfen Sie, ob das benutzerdefinierte CSS-Stil-Einführungs-Tag nach der Stilreferenz des Bootstrap-Frameworks platziert wird, um sicherzustellen, dass es beim Laden der Seite nicht durch den Framework-Stil überschrieben wird.

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="mycss.css"/>

Selektorproblem

Bei der Auswahl von Nachkommen usw. sind mehrere Tags, Klassennamen, IDs usw. beteiligt, und die Reihenfolge und Namen der untergeordneten Selektoren sind falsch geschrieben, was zu Fehlern führen kann.

Wenn Sie vergessen, den Klassennamen und die ID in das HTML-Tag zu schreiben, und der Selektor diese ausgelassenen Klassennamen, IDs usw. verwendet, wird der Stil natürlich nicht wirksam.

Der Nachkommenselektor hat vergessen, Leerzeichen hinzuzufügen.

Überprüfen Sie, ob zusätzliche Leerzeichen vorhanden sind, beispielsweise, ob der Selektor wie div.box{} als div .box{} geschrieben wird.

Problem mit dem Kodierungsformat

Speichern Sie alle CSS- und HTML-Webseitendateien im UTF-8-Format. Fügen Sie dem Head-Tag daher <meta charset="UTF-8"> hinzu.
Da die allgemeine Webseite das UTF-8-Kodierungsformat verwendet und die externe CSS-Datei standardmäßig das ANSI-Kodierungsformat verwendet, treten im Allgemeinen keine Probleme auf. Es können jedoch Probleme auftreten, wenn CSS-Dateien chinesische Kommentare enthalten.

Probleme mit der Stilkaskadierung

• Überprüfen Sie, ob ein Problem mit Ihrer CSS-Priorität vorliegt. Eine hohe Priorität überschreibt eine niedrige Priorität, was dazu führt, dass der Stil nicht angezeigt wird.
• Wenn Sie den Stil selbst festlegen, wird der vom übergeordneten Element übernommene Stil nicht wirksam. Prioritätsreihenfolge der CSS-Stile:
• !important > Inline-Stil > ID-Selektor > Klassenselektor > Tag > Platzhalter > Vererbung > Standardeigenschaften des Browsers (bei gleicher Priorität wird der vorherige Stil durch Letzteres kaskadiert);

Bestellung prüfen:

Dies ist das Ende dieses Artikels über nicht funktionierende CSS-Stile (die umfassendste Zusammenfassung von Lösungen aller Zeiten). Weitere verwandte Inhalte über nicht funktionierende CSS-Stile finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!