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是第一級元件P的後代。但是他們怎麼沒有大膽和藍色？ （TEXT 1 - 2確實顯示正確的樣式）

Answer 1

<p>是HTML中的一種特殊情況標籤。您不能在另一個段落中嵌入段落，並且隱式打開兩個P標記會關閉前一個段落。您的代碼實際上被解釋爲：

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

因此，3,4,5跨度實際上不在<p>之內。

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>