CSS : 클래스 내의 인접 형제

Question

인접 형제에 위쪽 여백을 추가하려고합니다.

<div class="container"> 
    <h2>Header 1</h2> 
    <p>Some text and sentences...</p> 
    <h2>Header 2</h2> 
    <p>Some more text and sentences..</p> 
</div> 

일반적으로 나는 인접한 형제에 CSS를 사용하여 "헤더 2"에 최고의 마진을 달성 할 것입니다.

p + h2{ 
    margin-top: 12px; 
} 

그러나, H2 마진은 .container의 H2의 CSS를 무시하는 동안 인접 형제 CSS의 작업을 할 수있는 방법

.container h2{ 
    margin: 24px 0px; 
} 

를 통해 정의했다?

Answer 1

.container h2은 그래서 고려 p + h2보다 더 구체적이다. 여백을 무시하려면보다 구체적인 선택자가 필요합니다.

이 "더 구체적으로"하고 오버라이드 (override) :

.container p + h2 { 
    margin-top: 12px; 
} 

Answer 2

는 다음을 시도해보십시오

.container > p + h2{ 
    margin: 12px; 
} 

즉 :

• 선택 h2 요소 ...
• 을 ... 즉시 p 요소를 따라하는 ...
• 을 .. 클래스 container을 가진 요소의 하위 요소입니다. .container > p + h2 이후

는 단지 1 개 클래스 1 개 소자를 갖는, .container h2을 무시할 것, 1 급 및 2 개 요소를 포함한다.

Answer 3

이 작동합니다

.container p + h2 { 
margin-top: 12px; 
}