2

次の HTML コードがあります。

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
    /*
    p.second > h2 {
        color: red;
    }
    */
    p > h2 {
        color: red;
    }
</style>
</head>
<body>

   <p >
      <h2>hello,world</h2>
       <h2>hello,world</h2>
   </p>
</body>
</html>

hello,worldが赤で表示されることを期待していますが、そうではありません。私は何を間違っていますか？

4

5 に答える 5

6

問題は次のとおりです。

   <p>
      <h2>hello,world</h2>
      <h2>hello,world</h2>
   </p>

有効な HTML コード (または、少なくとも非常にずさんなHTML コード) ではありません。<p>タグはインライン要素のみを含むことができますが、タグ<h2>はブロック要素です。基本的に、ブラウザーが<h2>タグを認識すると、自動的にタグが閉じられ<p>、2 つのタグが兄弟になります。次のような別の包含要素を使用する必要があります<div>。

   <div>
      <h2>hello,world</h2>
      <h2>hello,world</h2>
   </div>

次に、あなたのスタイルは次のようになります。

div > h2 {
    color: red;
}
于 2013-07-10T16:37:53.663 に答える
2

前に述べたように、段落内に見出しを入れることはできません。

これは Web 標準やエチケットに関する単なる合意ではなく、実際の障害です。

多くのブラウザーではそれができません。段落や見出しがバラバラになります。

したがって、任意のp h2またはp > h2セレクターは機能しません。使用してみてくださいp + h2{ color: red;}（apタグが前にあるh2タグで機能します）またはそのようなもの

段落内で見出しを折り返すことはできません

于 2013-07-10T17:01:11.723 に答える
2

その理由は

<p >
      <h2>hello,world</h2>

と同等です

<p >
      </p><h2>hello,world</h2>

なぜなら

要素の直後に, , , , , , , , , , , , , , , , , ,または ,要素が続く場合、または要素がない場合、要素の終了タグは省略できpます。 親要素の内容が多く、親要素は要素ではありません 。paddressarticleasideblockquotedirdivdlfieldsetfooterformh1h2h3h4h5h6headerhgrouphrmenunavolppresectiontableula

そのため、ページが XML コンテンツ タイプで提供されない限り、要素を要素h2の子にすることはできません。p

于 2013-07-10T17:02:15.877 に答える
1

有効な HTML コードではないためh2、使用できません。aにp置き換えるだけで動作するはずです。pdiv

于 2013-07-10T16:38:21.583 に答える
1

私はこれを推奨しているわけではありませんが、CSS の一般的な兄弟セレクターを使用することで、無効な HTML の問題を回避できます。

p ~ h2 {
    color: red;
}

jsFiddle の例

于 2013-07-10T16:40:13.937 に答える