CSSはエラーを報告しません-フロントエンドQ&A-php.cn

CSSはエラーを報告しません

王林

リリース： 2023-05-29 10:37:37

オリジナル

441 人が閲覧しました

CSS はエラーを報告しません

CSS はフロントエンド開発の非常に重要な部分であり、Web ページのスタイルのプレゼンテーションを担当します。フロントエンド開発者であれば、誰もがこのような状況に遭遇したことがあります。CSS 構文には明らかに問題がないのに、スタイルがページ上に正しく表示されないということです。

この状況は通常、開発者を非常に混乱させ、混乱させ、問題を特定するのに多くの時間を無駄にすることさえあります。この記事では、CSS がエラーを報告しないのにスタイルが正しく表示されない原因となるいくつかの一般的な問題について説明し、読者がこれらの問題をすぐに解決できるようにいくつかの解決策を提供します。

CSS セレクターは要素を正しく一致させることができません

CSS を作成するとき、通常、スタイルを設定する要素を見つけるためにセレクターを使用します。ただし、場合によっては、間違ったセレクターを選択したり、要素の検索に間違ったセレクターを使用したりして、CSS スタイルが正しく表示されないことがあります。

たとえば、クラスセレクターを使用して ID セレクターによってバインドされた要素のスタイルを設定したり、ID セレクターを使用してクラスセレクターによってバインドされた要素のスタイルを設定したりできます。

#my-class {
    color: red;
}

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

ログイン後にコピー

CSS スタイルこのように書かれたものは、セレクターが要素と正しく一致しないため、正しく表示されません。正しい書き方は次のようになります:

#my-id {
    color: red;
}

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

ログイン後にコピー

CSS スタイルは他のスタイルによって上書きされます

スタイルシートでは通常、複数のスタイルを定義しますが、これらのスタイルはそれぞれのスタイルと相互作用する可能性があります。他のスタイルによって一部のスタイルがオーバーライドされます。この状況は通常、ブラウザで要素スタイルを表示し、スタイルが正しく表示されていないか、スタイルの一部のみが有効であることが判明した場合に発生します。

たとえば、スタイルシート内の同じ要素に対して複数のスタイルを定義できます。

.my-class {
    color: red;
}

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

ログイン後にコピー

この方法で記述されたスタイルは、後のスタイルに対してのみ有効になり、前のスタイルは有効になります。スタイルはカバーされています。正しい書き方は、1 つのスタイルを使用して複数の属性を定義することです。

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

ログイン後にコピー

CSS スタイルは継承されます

CSS スタイルには、要素の子要素。継承されます。たとえば、color 属性と font-size 属性は子要素に継承できます。子要素に特定のスタイルを継承させたくない場合がありますが、要素の親要素でこれらのスタイルを誤って定義すると、子要素がこれらのスタイルを継承してしまい、ページが正しく表示されなくなります。

たとえば、div でいくつかのスタイルを定義できますが、これらのスタイルはその子要素に継承されます:

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

ログイン後にコピー

この方法でスタイルを記述すると、すべての子要素がこれらのスタイルを継承します。、テキスト、リンクなどを含みます。正しい書き方は、スタイルを親要素で定義するのではなく、要素ごとに個別に定義することです。

CSS スタイルプロパティはブラウザのデフォルトプロパティによってオーバーライドされます

ブラウザのデフォルトの動作では、一部の HTML 要素にデフォルトのスタイルプロパティが設定されます (例: ##) # ul 要素のデフォルトのスタイルは、リスト項目の左インデントとリスト項目マークのスタイルを設定します。

これらのデフォルト属性を定義しようとする場合がありますが、実際には、これらの属性はブラウザのデフォルト値によって上書きされており、スタイルが正しく表示されません。

たとえば、ul 要素の margin 属性を定義しようとすると、この属性はブラウザのデフォルト属性によって上書きされます:

ul {
    margin: 0;
}

ログイン後にコピー

この方法で記述されたスタイルは、ブラウザは ul 要素のデフォルトのインデントとマージンの値を設定しているため、正しく表示されます。正しい書き方は、特定の CSS プロパティを使用してデフォルトプロパティの値を変更することです。

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

ログイン後にコピー

CSS のプロパティですが、この属性は効果がないか、他のスタイルによってオーバーライドされます。これは通常、CSS スタイルを間違った場所に記述した場合、またはテンプレートにスタイルシートが正しく含まれていない場合に発生します。

たとえば、head でスタイルを定義できますが、テンプレートにスタイルシートを正しく導入していないため、このスタイルは有効になりません。

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

ログイン後にコピー

正しい書き方スタイルシート参照が head に配置されます:

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

ログイン後にコピー

上記は、CSS がエラーを報告しないにもかかわらず、スタイルが正しく表示されない原因となる一般的な問題のいくつかです。これらの問題が発生した場合は、これを実行してください。の記事が役に立ちます。最後に、CSS を作成する際にはドキュメントと仕様を注意深く読み、スタイルの維持と拡張が容易になるようにスタイルシートを合理的に整理および最適化することを強くお勧めします。

以上がCSSはエラーを報告しませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。