4

次の例で、「Heading」と「Heading 2」がどのように赤く着色されているか教えてもらえますか? http://jsfiddle.net/zxfNU/1/

HTML

<div id="root">
    <p>
        <p>Test 1</p>

        <h3>Heading</h3>

        <h3>Heading 2</h3>

    </p>
</div>

<h3>Heading 3</h3>

CSS

div#root > h3
{
    color: red;
}

実際にはp要素の下にあるのに、divの下にある場合、CSSはh3要素のみを選択していませんか?

4

4 に答える 4

5

pinsidepは有効なマークアップではありません。したがって、結果のhtmlは次のとおりです。

<div id="root">
    <p></p>
    <p>Test 1</p>
    <h3>Heading</h3>       
    <h3>Heading 2</h3>
    <p></p>
</div>

ご覧のとおり、ブラウザは間違ったマークアップを仕様に従って修正します。

于 2012-08-22T09:34:32.763 に答える
5

内部は有効なマークアップではないため、 <p>useの代わりに。<div><p><p>

于 2012-08-22T09:36:32.877 に答える
0

これは、ap タグ内の p タグが有効な Html ではないためです。 Inspect 要素を使用すると、html が次のように見つかります。

  <div id="root">
    <p>
        </p><p>Test 1</p>

        <h3>Heading</h3>

        <h3>Heading 2</h3>

    <p></p>
</div>

<h3>Heading 3</h3>
于 2012-08-22T09:37:11.650 に答える
0

Firebug などで、レンダリングされた HTML を見てみましょう。

ここに画像の説明を入力

pそれは、別のものを中に入れることができないからです。p

@あなたの編集されたフィドル：

次の HTML がレンダリングされます。

ここに画像の説明を入力

また、CSS も に変更したためdiv > h3、まだ赤色になっています。

于 2012-08-22T09:37:31.947 に答える