2012-03-18 94 views
0

對於這種選擇器「p span」將選擇p的所有後代元素。CSS子代選擇器

但是下面的代碼怎麼不起作用?

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確實顯示正確的樣式)

回答

11

<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>之內。

0

從規範 - 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>