Почему первый абзац не принимает этот стиль p: first-child?

Question

Почему первый абзац не принимает этот стиль 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>

Как выбрать первый абзац из css?

Answer 1

Вы ищете селектор псевдо :first-of-type! Итак, вы бы сделали это, чтобы получить первый абзац:

#content p:first-of-type

Answer 2

Хотя предыдущие ответы уже определили проблему (что p не является первым потомком родителя div), вот решение вашей проблемы, нацеленное на первое p, следующее за h1, в зависимости от вашего браузера:

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

Answer 3

Селектор соответствует любому элементу p, который является первым дочерним элементом его родителя.

В этом случае p является вторым дочерним элементом своего родителя.

Посмотрите на: http://www.w3schools.com/CSS/css_pseudo_classes.asp

Answer 4

Всегда можно просто назначить класс каждому первому абзацу - полное доказательство.

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

Answer 5

содержимое P не является его первым потомком - из того, что я видел, такой тег, как или будет первым потомком, а не фактическим содержимым.