CSSでのinheritキーワードの使用法は何ですか-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSでのinheritキーワードの使用法は何ですか

清浅

Jan 28, 2019 pm 02:14 PM

CSS の継承キーワードを使用すると、子孫要素の CSS スタイルが親要素または祖先要素から値を継承できるようになり、任意の CSS プロパティに適用できます

【おすすめコース: #CSS チュートリアル #】

キーワードの継承

CSS のカスケードの性質により、一部の CSS プロパティは要素の親から値を自動的に継承します。たとえば、要素のテキストの色を設定すると、その要素のすべての子孫は同じテキストの色を継承します。一部の属性値が自動的に継承される場合でも、継承される属性の重みが増加する場合があります。この場合、デフォルトですでに親の値を継承しているプロパティに対して継承を使用すると、親の値が強制的に継承されます。

inherit キーワードによって自動的に継承された値が適用される状況の 1 つは、ユーザーエージェントのスタイルシートが継承された値 (ブラウザーが特定の要素に適用するデフォルトスタイル) をオーバーライドする場合です。

たとえば、テキストの色の値は要素のすべての子孫に自動的に渡されますが、リンクの場合、通常、カラー属性はユーザーエージェントスタイルシートで青に設定されます。ほとんどの場合、リンクに別の色を適用することも、テキストの残りの部分と同じ色を継承することもでき、リンクであることを示す別の視覚効果 (下線や背景色の適用など) を適用することもできます。）。リンクのテキストの色を残りのテキストと同じにする場合は、継承値を使用して、通常は継承される色の値を強制することができます。

div{
			color:pink;
		}
		a{
			color:inherit;
		}

ログイン後にコピー

レンダリング:

CSSでのinheritキーワードの使用法は何ですか

一部の CSS プロパティは要素の親の計算値を継承しませんが、プロパティ値は、その親の値と同じ値に設定されます。この場合、inherit キーワードが役に立ち、値を自動的に継承しないプロパティでも値を継承できるようになります。

たとえば、要素に青色の境界線を設定し、そのすべての子要素 div に同じ境界線を持たせたい場合は、inherit キーワードを設定して、親要素と同じ境界線の色を継承させることができます。

.el {
  padding:10px;
  border: 5px solid #0099cc;
}

.child {
	padding:10px;
  margin-top: 20px;
  border: inherit;
}

.el-2 {
  margin-top: 30px;
  border: 5px solid hotpink;
}

.child-2 {
  border: 5px solid inherit;
  margin-top: 20px;
}

ログイン後にコピー

レンダリング:

CSSでのinheritキーワードの使用法は何ですか