CSS第一子选择器问题

Fra*_*sco 3 css css-selectors

<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>
Run Code Online (Sandbox Code Playgroud)

为什么如果我在"p"线之前放置一个元素,我看不到第一行黄色?应该p:第一个孩子选择第一个"p"而不只是第一个标签?

谢谢

Bol*_*ock 10

:first-child不关心这种类型.通过添加<i></i>到您的代码,i成为第一个孩子(假设<style>在其中<head>,其余的在<body>当然).你的选择器想要匹配p,但由于p不再是第一个孩子,你的风格无法应用.

如果要按类型过滤,请使用CSS3 :first-of-type伪类:

p:first-of-type
{
    background:yellow;
}
Run Code Online (Sandbox Code Playgroud)