CSS Selector Nhúng (&)

Định nghĩa và cách sử dụng

CSS Nhúng (&) Selector được sử dụng để áp dụng phong cách cho phần tử trong ngữ cảnh của một phần tử khác.

Nhúng giảm bớt nhu cầu lặp lại selector cho các phần tử liên quan.

Mẫu

Ví dụ 1

Trước khi nhúng, bạn phải khai báo từng selector riêng lẻ một cách rõ ràng, như sau:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
}
.box > a {
  color: green;
}
.box > a:hover {
  color: white;
  background-color: salmon;
}

Thử ngay lập tức

Ví dụ 2

Sau khi nhúng, selector được tiếp tục, và các quy tắc phong cách liên quan được nhóm trong quy tắc cha:

.box {
  border: 2px solid green;
  background-color: beige;
  font-family: monospace;
  font-size: 20px;
  & > a {
    color: green;
    &:hover {
      color: white;
      background-color: salmon;
    }
  }
}

Thử ngay lập tức

Lưu ý:Nếu bạn muốn xóa phong cách .box trong ví dụ trên, bạn có thể xóa toàn bộ nhóm mà không cần tìm kiếm các selector liên quan.

CSS 语法

parentrule {
  css declarations;
  & childrule {
    css declarations;  } 
}

技术细节

浏览器支持