Bộ chọn theo quan hệ họ hàng khi lồng nhau trong SASS
Hãy cùng xem xét cách thêm các bộ chọn khác nhau, chọn các phần tử theo quan hệ họ hàng, khi lồng nhau trong SASS. Xem các ví dụ bên dưới.
Ví dụ
Bộ chọn con trực tiếp:
div {
> p {
color: red;
}
}
Kết quả biên dịch:
div > p {
color: red;
}
Ví dụ
Bộ chọn phần tử liền kề (kế tiếp)
div {
+ p {
color: red;
}
}
Kết quả biên dịch:
div + p {
color: red;
}
Ví dụ
Bộ chọn phần tử anh chị em chung (phía sau):
div {
~ p {
color: red;
}
}
Kết quả biên dịch:
div ~ p {
color: red;
}
Bài tập thực hành
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ như thế nào:
ul {
color: red;
> li {
padding: 20px;
}
}
Hãy cho biết kết quả biên dịch của đoạn mã sau sẽ như thế nào:
div {
ul {
> li {
padding: 20px;
}
}
}
