CSSスタイルは継承されません

Web デザインにおいて、CSS は非常に重要なツールです。 Web ページを美しくするためのさまざまなスタイルを提供し、Web サイトのユーザー エクスペリエンスを向上させます。ただし、CSS では、さらに難しい問題に遭遇することがあります。問題の 1 つは、CSS スタイルが継承されないことです。

継承されない CSS スタイルとは何ですか?

簡単に言えば、セレクターの下にスタイルを設定すると CSS スタイルは継承されませんが、このスタイルはセレクターの子要素には継承されません。この状況により、Web デザインが非常に困難になることがよくあります。たとえば、Web サイト全体の本文のフォント サイズを設定したいとします。ただし、セレクターの下の子要素のフォント サイズがすでに設定されている場合、セレクターの下のすべての子要素はフォント サイズを継承しません。 。 フォントサイズ。これには、各サブ要素のフォント サイズをリセットする必要がありますが、これは非常に面倒で、コードのメンテナンスには役立ちません。

CSS スタイルが継承されない理由

通常、CSS スタイルは次の理由により継承されません:

1. 特別な CSS プロパティの使用

一部の CSS プロパティは継承をサポートしていません。たとえば、display、position、float、clear などの CSS プロパティは継承をサポートしていません。これらの属性がセレクターで使用されている場合、セレクターの下のすべての子要素はスタイルを継承しません。

2. 子要素は親要素のスタイルを継承しますが、変更されます

子要素に新しいスタイルを設定すると、スタイルが継承されなくなる場合があります。親要素から。これは通常、新しいスタイルが継承されたスタイルと競合し、継承されたスタイルがオーバーライドされることが原因です。

3. 子要素はセレクター ルールを通じて兄弟要素として解釈されます

子要素のセレクター ルールが親の子ではなく兄弟要素として解釈される場合element 要素の場合、スタイルは継承されません。たとえば、または ~ を使用してスタイル シート内の兄弟要素を選択すると、それらのスタイルは継承されません。

CSS スタイルが継承されない問題を解決する方法

1. グローバル セレクターを使用する

グローバル セレクターを使用して、子要素にスタイルを強制的に継承させます。親要素。以下に示すように:

親要素のスタイル:

.parent-element {
  font-size: 16px;
}

子要素のスタイル:

.child-element {
  all: initial;
  font-size: inherit;
}

子要素のスタイルでは、all:initial を使用してすべてのスタイルをリセットします。これを次のように設定します。デフォルト値を指定し、font-size:inherit を使用して親要素のフォント サイズを継承します。

2. より適切な継承を備えた CSS プロパティを使用する

一部の CSS プロパティは継承をサポートしています。親要素によって一度設定できますが、子要素はこの値を自動的に継承します。たとえば、color、font-size、font-family などの CSS プロパティはすべて継承をサポートしています。これらの属性をセレクターで使用すると、子要素はこの属性を継承できます。

3. セレクターのネストを減らす

セレクターのネストを回避すると、子要素の継承の問題を回避できます。 CSS スタイルを記述するときは、単純なセレクターを使用し、セレクターのネストを避けるようにしてください。

4. スタイルが競合する場合に !重要 を追加します

場合によっては、特別な CSS プロパティまたはセレクターのネストの使用を避けることができません。この場合、それをstyle このスタイルが最も優先されるようにするには、最後に ! important を使用して、他のスタイルをオーバーライドします。

概要

CSS では、スタイルが継承されないため、Web デザインが特に面倒になる場合があります。ただし、いくつかのスキルと方法を習得すれば、この問題は簡単に解決できます。 CSS スタイルの非継承の問題に対処する一般的な方法は、グローバル セレクターの使用、より適切な継承を備えた CSS プロパティの使用、セレクターのネストの削減、および ! important の使用です。

以上がCSSスタイルは継承されませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。