Why first paragraph not taking this style p:first-child?

Why first paragraph not taking this style p:first-child

#content p:first-child {color:#4C4C4C;
font-size:1.2em;
font-weight:bold;
line-height:1.8;
margin-bottom:0.5em;}


<div id="content">
 <h1>Welcome</h1>
   <p>开发者_高级运维;first paragraph</p>
   <p>second paragraph</p>
   <p>third paragraph</p>
</div>

How to select first paragraph from css?

---

You're looking for the :first-of-type psuedo selector! So, you'd do this to get that first paragraph:

#content p:first-of-type

---

While the previous answers have already defined the problem (that the p isn't the first child of the parent div), here's a solution to your problem, to target the first p that follows a h1, depending on your browser:

h1 + p { /* styles any paragraph that immediately follows a h1 element */ }

---

The selector matches any p element which is the first child of its parent.

In this case the p is the second child of its parent.

Have a look at: http://www.w3schools.com/CSS/css_pseudo_classes.asp

---

the content of P isn't its first child - from what I've seen a tag such as or would be the first child not the actual content.

---

Could always just assign a class to every first paragraph - full proof.

p.indent{
text-indent:50px;
   }