3

私は CSS の継承について多くのことを読んできましたが、この質問について何も見つけることができず、混乱しています。次の点を考慮してください。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.anc {
  background-color: blue;
  color: red;
}
.des {
  background-color: inherit;
  color: inherit;
}
</style>
</head>
<body>

<div class="anc">
  <p class="des">
    One <!-- Blue background, red text. Clearly inheritance. -->
  </p>
</div>

<p class="anc">
  <div class="des">
    Two <!-- Why is nothing inherited here? -->
  </div>
</p>
</body>
</html>

「One」テキストは期待どおりに機能しています。しかし、「Two」のテキストに青い背景と赤いテキストがない理由がわかりません。

インライン要素とは対照的に、ブロック要素の継承に関する特別なルールはありますか? それとも、div について何か特別なことはありますか? ここで何が欠けていますか？継承の非常に完全な説明へのオンライン参照はありますか? 私が見た (そして長い間探してきた) ものはすべて、「1 つ」のような例を説明しているだけで、「2 つ」のような問題には対処していません。

ここで求めているのと同じ視覚効果を得るには、多くの (より良い) 方法があることを知っています。しかし、この例は、継承を一般的に理解しようとしている私に関するものであり、この HTML コードに特定の影響を与えようとしているわけではありません。

手伝ってくれてどうもありがとう！

4

4 に答える 4

5

a 内にブロック レベルの要素をネストすることはできません<p>。開口<p>部は最終的に自己終了要素として機能し、子孫 div を<p>後続の兄弟として の外に押し出します。また、段落は div の<p> 後に空を作成します。構造は最終的に次のようになります。

<p class="anc"> </p>
    <div class="des">Two</div>
<p></p>
于 2013-09-18T23:02:15.040 に答える
5

内部タグは有効な HTML ではありません<div>。<p>レンダリングされた HTML を確認すると、おそらく次のようになります。

<p class="anc"></p>
<div class="dec">TWO</div>
<p></p>

ブラウザは無効なネストを修正しますが、CSS 定義が壊れます。

于 2013-09-18T23:02:06.407 に答える
1

A<p>にはインライン要素のみを含めることができます。<div>にaを入れるのは無効<p>です。

于 2013-09-18T23:01:59.773 に答える
0

あなたは交換<div>し<p>、2番目のケースでは。また、css は を指定.desしますが、HTML のクラス名はdecSee working jsFiddle hereです。

<div class="anc">
  <p class="dec">
    One <!-- Blue background, red text. Clearly inheritance. -->
  </p>
</div>

<div class="anc">
  <p class="dec">
    Two <!-- Why is nothing inherited here? -->
  </p>
</div>

.anc {
  background-color: blue;
  color: red;
}

また、inheritスタイルがすでに設定されている親内で子がレンダリングされるため、 は必要ありません。

于 2013-09-18T23:04:08.967 に答える