Bộ chọn theo mối quan hệ khi lồng nhau trong LESS
Hãy cùng xem xét cách thêm các bộ chọn khác nhau trong LESS khi lồng nhau, những bộ chọn này chọn các phần tử dựa trên mối quan hệ. 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 {
}
Ví dụ
Bộ chọn phần tử liền kề:
div {
+ p {
color: red;
}
}
Kết quả biên dịch:
div + p {
}
Ví dụ
Bộ chọn anh chị em chung:
div {
~ p {
color: red;
}
}
Kết quả biên dịch:
div ~ p {
}
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ẽ là gì:
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ẽ là gì:
div {
ul {
> li {
padding: 20px;
}
}
}
