CSS에서 +의 의미는 무엇입니까?

Question

이 CSS 규칙의 +은 무엇을 의미합니까?

h2 + p { 
    font-size: 1.4em; 
    font-weight: bold; 
    color: #777; 
} 

Answer 1

+은 adjacent sibling combinator입니다. 셀렉터 h2 + p 수단

은 직후h2을 오는 p 선택한다.

그림 :

<h2>Headline!</h2> 
<p>The first paragraph.</p> <!-- Selected [1] --> 
<p>The second paragraph.</p> <!-- Not selected [2] --> 

<h2>Another headline!</h2> 
<blockquote> 
    <p>A quotation.</p>  <!-- Not selected [3] --> 
</blockquote> 

어떤 선택되어 어떤 것은 아니다는 :

1. 오른쪽 첫번째 h2 후
   이 p이 올를 선택했습니다.

2. h2 반대로이 p 처음 p 이후에 발생
   선택하지 않음. h2 바로 뒤에 나오지 않으므로 선택되지 않았습니다. 그것은 여전히 ​​h2 요소를 따르기 때문에

   그러나, 단지 즉시 선택 h2 + p이 요소를 일치하지 않습니다 아니지만, h2 ~ p는 대신 general sibling combinator을 사용합니다.

3. 은
   이 p은 내 위치를 선택하고, 그 선택을 만족시키기 위해 따옴표 안에 앞에 아무 h2 없다 않습니다.

Answer 2

h2 태그 바로 옆에있는 모든 P 태그를 선택합니다. 그런 다음 그 속성을 부여합니다.

Answer 3

그것은 직접 DOM의 후 h2 요소 모두 p 요소를 선택한다. 따라서, 다음과 같은 p 요소는 스타일 될 것이다 :

<h2>A heading</h2> 
<p>This paragraph will be styled.</p> 

그러나이없는 것 :

<h2>A heading</h2> 
<hr> 
<p>This paragraph will NOT be styled.</p> 

을 그리고도이 것 :

<p>This paragraph will NOT be styled.</p> 
<h2>A heading</h2> 

을 ...또는이 :

<h2>A heading</h2> 
<section> 
    <p>This paragraph will NOT be styled.</p> 
</section> 

Answer 4

아니라 제 1 p 영향을 직접 (직후) 온다 H2

예 1 다음

<h2></h2> 
<p></p> <!-- THIS ONE IS AFFECTED --> 
<p></p> <!-- THIS ONE IS NOT AFFECTED --> 
<p></p> <!-- NOR THIS ONE --> 
<p></p> <!-- NOR THIS ONE --> 
<p></p> <!-- ETC --> 

예 2

<h2></h2> 
<div></div> 
<p></p> <!-- THIS ONE IS NOT AFFECTED -->