Bộ chọn theo ngữ cảnh trong CSS
Bộ chọn theo ngữ cảnh, được biểu diễn bằng
lệnh khoảng trắng (' '), cho phép chọn
các thẻ được lồng bên trong một phần tử cha xác định
Cú pháp
selector1 selector2 {
}
Ví dụ
Hãy áp dụng cho tất cả các thẻ p
nằm bên trong các thẻ div và đổi màu
chúng thành đỏ:
<div>
<p>
văn bản
</p>
<p>
văn bản
</p>
</div>
div p {
color: red;
}
:
Ví dụ
Hãy áp dụng cho tất cả các thẻ p
nằm bên trong phần tử có #elem và đổi màu
chúng thành đỏ:
<div id="elem">
<p>
văn bản
</p>
<p>
văn bản
</p>
</div>
#elem p {
color: red;
}
:
Ví dụ
Hãy áp dụng cho tất cả các thẻ p
nằm bên trong các phần tử có lớp .block
và đổi màu chúng thành đỏ:
<div class="block">
<p>
văn bản
</p>
<p>
văn bản
</p>
</div>
.block p {
color: red;
}
:
Ví dụ
Hãy áp dụng cho tất cả các thẻ b
nằm bên trong các thẻ p, mà chính các thẻ p đó lại nằm bên trong
các thẻ div và đổi màu chúng thành đỏ:
<div>
<p>
văn bản <b>+</b>
</p>
</div>
div p b {
color: red;
}
:
Xem thêm
-
Bộ chọn phần tử con trực tiếp,
cho phép chọn các phần tử theo quan hệ lồng nhau trực tiếp -
Bộ chọn phần tử anh chị em liền kề,
cho phép chọn một phần tử dựa trên phần tử liền kề với nó -
Bộ chọn phần tử anh chị em chung,
cho phép chọn các phần tử nằm sau một phần tử xác định -
Bộ chọn phổ quát,
cho phép chọn tất cả các phần tử
