CSSの優先順位と継承の問題

★CSSの競合、つまり優先順位
CSS自体の設定は同じ要素に同時に複数のスタイルを適用することができますが、その際にスタイル間の競合が発生し、ユーザーが達成できない場合があります。彼らは効果を望んでいます。
★CSS競合解決の優先順位ルール：
● CSSカスケードスタイルシートの導入方法の優先順位： inline＞embedded＞linked＞import
● 複数の外部スタイルのうち、最後に出現するスタイルの優先度が、導入されたスタイルよりも高くなります。が最初に表示され、一般にオーバーライドとして知られています
● スタイルでは、セレクターの優先順位: ID スタイル > クラススタイル > マークスタイル (重みメタファーを使用: ID の重みは 100、クラスタグ名の重みは 10 、タグ名の重みは 1) です
● スタイルの後に ! important を追加します。例: .abc {background:#fff !improtant;} このスタイルの優先順位は、デフォルトで最上位に昇格します。とグローバルスタイルには影響されません。
✪注: !重要はセミコロンの前に書く必要があります
優先順位:
近接原則 (コードに近いほど優先順位が高くなります)
選択範囲が小さいほど優先順位が高くなります。 CSSを改良し、親要素のセレクターをさらに追加してレイヤーごとにラップし、選択範囲を狭めます

★スタイルの継承:
継承とは、上位レベル(親)のCSSスタイルと、その子のCSSスタイルを設定することを意味します。上位レベル (親) と下位レベルすべてのレベル (下位レベル) がこのプロパティを持ちます。一般に、テキストサイズ、テキストの太さ、テキストの色、フォントなどのプロパティを継承できるのはテキストテキストのみです。ただし、一部の CSS スタイルは継承されないことに注意してください。例: border: 1px Solid red;

demo:

如果你不知道自己想做什么该做什么，那你什么都做不好。

ログイン後にコピー

説明: (1) 上位 (親: p) のテキストの色を赤に設定しましたが、子 (スパン) のテキストの色は赤に設定しました。 ) は設定されていませんが、Text には継承プロパティがあるため、子のテキストの内容は依然として赤色です。
(2) 親の文字色スタイルを設定した後、継承により複数の子が親と同じ色になる場合、一部の子の色を親と同じにしたくない場合は、設定するだけで済みます。対応する子に必要な色。
✪注: 別の特別な重みがあります。継承にも重みがありますが、それは非常に低いものもあります。そのため、継承の重みが最も低いことが理解できます。

継承の利点: 上位レベルの CSS スタイルシート属性のみを設定でき、子 (従属) はすべてこの CSS 属性を持っているため、CSS コードが削減され、メンテナンスが容易になります。

★CSSで継承できる属性とできない属性
1. 継承できない属性

1. 要素が生成するボックスのタイプを指定します

2. テキスト属性:

vertical-align: 縦書きテキスト。配置

text-decoration: テキストに追加する装飾を指定します

text-shadow: テキストの影の効果

white-space: 空白文字の処理

unicode-bidi: テキストの方向を設定します

3.ボックスモデルの幅、高さ、マージン、マージン上、マージン右、マージン下、マージン左、ボーダー、ボーダースタイル、ボーダートップスタイル、ボーダー右スタイル、ボーダーボトムスタイル、ボーダー左スタイル、ボーダー幅、ボーダー上幅、ボーダー右右、ボーダー下幅、ボーダー左幅、ボーダー色、ボーダー上色、ボーダー右色、ボーダー下色、ボーダー左色、ボーダー上、ボーダー右、ボーダー下、ボーダー左、パディング、パディング上、パディング右、パディング下、パディング左

4、背景属性:background、background-color、background-image、background-repeat、background-position、background-attachment

5. 位置決め属性:float、clear、position、top、right、bottom、left、min-width、min -height、max-width、max-height、overflow、clip、z-index

6. 生成されたコンテンツ属性: content、counter-reset、counter-increment

7. アウトラインスタイル属性:outline-style、outline-width 、アウトラインカラー、アウトライン

8. ページスタイル属性: サイズ、ページ区切り前、ページ区切り後

9. サウンドスタイル属性: 一時停止前、一時停止後、一時停止、キュー前、キュー-after、cue、play-during

2. 継承される属性

1. フォントファミリー属性

font: 結合フォント

font-family: 要素のフォントファミリーを指定します

font-weight:フォント

font-size: フォントのサイズを設定します