ホームページ > ウェブフロントエンド > フロントエンドQ&A > CSSが機能しない原因は何ですか

CSSが機能しない原因は何ですか

青灯夜游
リリース: 2021-07-06 13:47:24
オリジナル
3551 人が閲覧しました

CSS が機能しない理由: 1. 外部スタイル シートが関連付けられていない; 2. 保存されたスタイル シートのエンコーディングが間違っている; 3. セレクターが正しく記述されていない; 4. 構文エラー (間違っているなど)属性名または属性値が記述されていない、記号が中国語または全角記号を使用している、HTML タグが完全に記述されていない; 5. スタイルはカスケードされています。

CSSが機能しない原因は何ですか

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

ページを書いていると、自分で書いたCSSスタイルが反映されないことがありますが、CSSスタイルが反映されていないことはどのように確認すればよいのでしょうか? CSS スタイルが機能しない一般的な理由は何ですか? CSS スタイルが機能しない理由を見てみましょう。

機能しない CSS スタイルのトラブルシューティング手順:

まず、キャッシュのクリア、ブラウザの再起動などを試してください。機能しない場合は、さらにトラブルシューティングを行ってください。

その後、次のトラブルシューティング プロセスに従ってください:

CSSが機能しない原因は何ですか

トラブルシューティングと変更の方法は次のとおりです:

もう一度メッセージを表示して、トラブルシューティングの前にキャッシュを削除し、ブラウザを再起動するなどの方法で、失敗した場合はさらにトラブルシューティングを行ってください。何も悪いことをしていなくても、キャッシュやブラウザの問題が原因である可能性があります。リセットすると問題が解決する可能性があります。

#CSS スタイルが機能しない一般的な理由:

#1. 外部スタイル シートが関連付けられていない

これは非常に言葉にならない間違いですが、実際に以前にも遭遇したことがあります。一生懸命コードを書いた後、どのスタイルも有効ではないことがわかりました。私は長い間愚かに働きましたが、最終的には、外観のスタイルを関連付けるのを忘れていました。当時の私の気分は本当にそうでした。 。

すべてのスタイルが有効にならない場合は、まずスタイル シートが関連付けられているかどうか、または関連付けられているスタイルの位置と名前が正しいかどうかを確認してください

<link rel="stylesheet" href="css/index.css"/>
ログイン後にコピー

2.保存されたスタイル シートが間違っています

CSS テーブルのエンコーディングが間違っていると思われる場合は、CSS ファイルを utf-8 エンコーディングのファイルとして直接保存できます。

3. セレクターの選択が間違っている セレクターの順序と名前を誤って記述すると、

#html 内のタグが忘れられてエラーが発生する可能性があります。クラス名と ID を書き込み、セレクターがこれらの欠落したクラス名、ID などを使用すると、当然スタイルは有効になりません。
  • 子孫セレクターがスペースで記述されるかどうか;
  • p.box{} のようなセレクターは p.box{} として記述されますか?つまり、余分なスペースが書き込まれます
  • 4. 構文エラー
  • Google Chrome の開発者ツールを例に挙げると、一般的には文法エラーです。スタイルに取り消し線を引くと が表示され、スタイルの左側にアイコン プロンプトが表示され、そこにマウスを移動すると英語のプロンプトが表示されます。次の図に示すように:

一般的な文法エラーには次のものが含まれます:

1. 間違った属性名が書き込まれ、属性値が仕様に準拠していません。

2. 次の記号は中国語または全角記号が使用されています:

,;{}:
ログイン後にコピー

3. HTML タグが完全に記述されておらず、「<」または「>」が欠落しているなどです。CSSが機能しない原因は何ですか

5. スタイルがカスケードされている

カスケードが原因の場合は、スタイルの優先順位を上げる必要があります。

一般的に使用される方法には、セレクターに要素を追加してその特異性を高めるか、次のようにスタイルのセミコロンの前のスペースに ! important を追加する方法が含まれます:

background-color: pink !important;
ログイン後にコピー
(学習ビデオの共有: CSS ビデオ チュートリアル )

以上がCSSが機能しない原因は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート