Ý nghĩa của + trong CSS là gì?

Question

+ trong quy tắc CSS này có nghĩa là gì?

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

Answer 1

+ là adjacent sibling combinator.

Điều đó có nghĩa bộ chọn h2 + p chỉ chọn p mà đến ngay sau khi một h2.

Một minh họa:

<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> 

Có gì chọn và những gì không:

1. chọn
   p này đi kèm ngay sau khi h2 đầu tiên.

2. Không chọn
   p này xảy ra sau khi p đầu tiên như trái ngược với h2. Vì nó không ngay lập tức theo các h2, nó không được chọn.

   Tuy nhiên, vì nó vẫn theo yếu tố h2, chỉ cần không ngay lập tức, bộ chọn h2 + p sẽ không phù hợp với yếu tố này, nhưng h2 ~ p sẽ, sử dụng general sibling combinator để thay thế.

3. Không chọn
   p này nằm trong một , và không có h2 trước khi nó bên trong báo giá để đáp ứng chọn của nó.

Answer 2

nó chọn tất cả thẻ P nằm ngay bên cạnh thẻ h2. Sau đó cung cấp cho nó các thuộc tính đã nói.

Answer 3

Nó sẽ chọn tất cả p yếu tố liên quan trực tiếp sau một yếu tố h2 trong DOM. Như vậy, yếu tố p sau đây sẽ được theo kiểu:

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

Nhưng điều này sẽ không:

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

Và không sẽ này:

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

...hay này:

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

Answer 4

Chỉ ảnh hưởng đến p đầu tiên đó là trực tiếp sau (đến trực tiếp sau) H2

dụ 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 --> 

dụ 2:

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