CSS第一個孩子選擇器問題

<style type="text/css"> 
p:first-child 
{ 
background:yellow; 
} 
</style> 


<i></i> 
<p>I am a strong man. I am a strong man.</p> 
<p>I am a strong man. I am a strong man.</p> 
<p>I am a strong man. I am a strong man.</p>

爲什麼如果我把一個元素放在「p」行之前，我看不到第一行黃色？應該p：第一個孩子選擇第一個「p」而不僅僅是第一個標籤？CSS第一個孩子選擇器問題

感謝

來源

2011-04-05 Francesco

:first-child不關心類型。通過將<i></i>添加到您的代碼中，i成爲第一個孩子（假設<style>在<head>之內，其餘的在<body>當然）。您的選擇器想要匹配p，但由於p不再是第一個孩子，因此您的風格無法應用。

如果你想按類型進行過濾，使用CSS3 :first-of-type僞類：

p:first-of-type 
{ 
    background:yellow; 
}

來源

2011-04-05 07:52:52 BoltClock

它的工作原理在舊的瀏覽器？ – Francesco 2011-04-05 08:15:30

我真的發現myslf它可能更容易包裝在父包裝div中的元素，並指定在CSS中...它的工作原理.. – Francesco 2011-04-05 08:16:24

@camelCase：不是真的。是的，你最好將'p'元素包裝在'div'中。無論如何，在一系列'p'之前擁有'i'並沒有什麼意義。 – BoltClock 2011-04-05 08:17:18

CSS第一個孩子選擇器問題

回答

相關問題