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
bộ 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:
<h2>text</h2>
<p>
+
</p>
<p>
-
</p>
<p>
-
</p>
h2 + 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:
<p class="test">
text
</p>
<p>
+
</p>
<p>
-
</p>
.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:
<p class="test">
text
</p>
<p class="elem">
+
</p>
<p>
-
</p>
.test + .elem {
color: red;
}
:
Xem thêm
-
Bộ chọn con trực tiếp,
cho phép chọn các phần tử theo sự lồng nhau trực tiếp -
Bộ chọn theo ngữ cảnh,
cho phép chọn một phần tử theo phần tử cha của nó -
Bộ chọn anh chị em chung,
cho phép chọn các phần tử sau một phần tử được chỉ định -
Bộ chọn toàn thể,
cho phép chọn tất cả các phần tử
