CSS子孫セレクタ

Question

この種のセレクタでは、 "p span"はpのすべての子孫要素を選択します。

しかし、次のコードはどうしてうまくいかないのですか？

p span { font-weight:bold;color:blue } 

<p> 
    <p> 
     <span>TEXT 1</span> 
    </p> 
    <p> 
     <span>TEXT 2</span> 
    </p> 
    <span>TEXT 3</span> 
    <span>TEXT 4</span> 
    <span>TEXT 5</span> 
</p> 

TEXT 3-5は第1レベル要素pの子孫です。しかし、彼らはどのように太った青色で表示されないのでしょうか？ （TEXT 1 - 2に正しいスタイルが表示されます）

Answer 1

<p>はHTMLの特殊なタグです。段落を別の段落に埋め込むことはできず、2つのPタグを開くと、前の段落を暗黙的に閉じます。 3,4,5スパンは全く<p>の内側に実際にされないように

<p></p> <---closed by having opened the next <p> 
<p><span>TEXT1</span></p> 
<p><span>TEXT2</span></p> 
<span>3</span> 
etc... 

：あなたのコードが実際にあると解釈されます。スペックから

Answer 2

からhttp://www.w3.org/TR/html401/struct/text.html#h-9.3.1

<p>要素は段落を表します。 ブロックレベルの要素（<p>を含む）を含めることはできません。

<p>要素を<div>要素に変換してみてください。

p span { font-weight:bold;color:blue } 

<div> 
    <div> 
     <span>TEXT 1</span> 
    </div> 
    <div> 
     <span>TEXT 2</span> 
    </div> 
    <span>TEXT 3</span> 
    <span>TEXT 4</span> 
    <span>TEXT 5</span> 
</div>