CSS : 요소에 다른 요소가있을 때 first-child 예기치 않은 결과

Question

첫 번째 요소를 제외한 모든 단락 요소에 20px의 여백을 설정하려고합니다. 이 코드했습니다 :

<div> 
      <h3>Title</h3> 
      <p>Paragraph 1</p> 
      <p>Paragraph 2</p> 
      <p>Paragraph 3</p> 
    </div> 

을 그리고 이것은 내 CSS입니다 :

div p{ 
    margin-top: 20px; 
} 
div p:first-child{ 
    margin-top: 0; 
} 

하지만이 작동하지 않습니다 ... 나는 그것이 때문에의 생각,하지만 난 방법을 알아낼 수 없습니다 그것을 고치기 위해 ... 당신이 나를 도울 수 있다고 확신합니다! 내가 영어로 엉망이된다면 사과한다. 나 자신을 분명하게 만들었 으면 좋겠다.

감사합니다 !!!

Answer 1

은 첫 번째를 제외하고 이러한 요소의 순서에있는 모든 단락 요소에 20 픽셀의 여백 탑을 설정하려면 (!에만 IE9 +)를 지원하지만주의 사용

p + p { margin-top: 20px; } 

당신은 또한이 보인다, 제로 시퀀스의 첫 번째 p 요소의 여백 상단을 설정하려면

, 단지 추가

p { margin-top: 0; } 

,

더 구체적인 선택기가있는 규칙은 시퀀스의 첫 번째 요소를 제외한 모든 요소에 대해이를 대체합니다.

셀렉터 div p:first-child은 부모의 첫 번째 자식 인 p 요소와 div 요소의 하위 요소와 일치하므로 작동하지 않습니다. 귀하의 예에서 어떤 요소도 부모의 첫 번째 하위 요소가 아닙니다 (p).

Answer 2

p은 첫 번째 자녀가 아니기 때문에 h3입니다.

div h3 + p { 
    margin-top: 0; 
} 

데모 : :로 이동 http://jsfiddle.net/fSZWU/

Answer 3

가 의사 클래스 :first-child이 부모의 자식 해당 유형의 첫 번째 요소 나타내지 않습니다. 오히려 부모의 첫 번째 하위 요소 을 의미합니다..

내가 처음에 혼란 스러울 때가 있었기 때문에 나는 :first-child = first을 기대하고있었습니다. @ yabol (h3 + p)에 의해 제안 된 솔루션은 h3 옆에 단락을 표시합니다. 귀하의 경우에는 <p>입니다. 페이지의 구조를 변경하면 특정 스타일을 잃을 수 있으므로주의해야합니다.

정확히 무엇을 찾으려면 CSS3 pseudo class :first-of-type을 사용해야합니다. ,

Try it out yourself!