Bộ chọn lân cận trong CSS

Bộ chọn lân cận + cho phép chọn một phần tử dựa vào phần tử liền kề phía trên nó.

Cú pháp

cssbộ chọn1 + bộ chọn2 {
  
}

Ví dụ

Hãy áp dụng cho tất cả các thẻ p nằm trực tiếp ngay sau các thẻ h2, và tô màu đỏ cho chúng:

html<h2>text</h2>
<p>
  +
</p>
<p>
  -
</p>
<p>
  -
</p>

cssh2 + p {
  color: red;
}

Результат:

Ví dụ

Hãy áp dụng cho tất cả các thẻ p nằm trực tiếp ngay sau các phần tử có lớp .test, và tô màu đỏ cho chúng:

html<p class="test">
  text
</p>
<p>
  +
</p>
<p>
  -
</p>

css.test + p {
  color: red;
}

Результат:

Ví dụ

Hãy áp dụng cho tất cả các phần tử có lớp .elem, nằm trực tiếp ngay sau các phần tử có lớp .test, và tô màu đỏ cho chúng:

html<p class="test">
  text
</p>
<p class="elem">
  +
</p>
<p>
  -
</p>

css.test + .elem {
  color: red;
}

Результат:

Xem thêm