LESS - Bộ chọn dành cho cha mẹ

Trong chương này, hãy để chúng tôi hiểu cách Parent Selectorscông việc. Có thể tham chiếu bộ chọn cha bằng cách sử dụng&(dấu và) toán tử. Các bộ chọn chính của một quy tắc lồng nhau được đại diện bởi& toán tử và được sử dụng khi áp dụng một lớp sửa đổi hoặc lớp giả cho một bộ chọn hiện có.

Bảng sau đây cho thấy các loại bộ chọn mẹ:

Sr.No.	Loại & Mô tả
1	Nhiều & Các & sẽ đại diện cho bộ chọn gần nhất và cũng là tất cả các bộ chọn mẹ.
2	Thay đổi Thứ tự Bộ chọn Đặt trước một bộ chọn cho các bộ chọn kế thừa (mẹ) sẽ hữu ích khi thứ tự bộ chọn được thay đổi.
3	Combinatorial Explosion Các & cũng có thể tạo ra tất cả các hoán vị có thể có của các bộ chọn trong một danh sách được phân tách bằng dấu phẩy.

Thí dụ

Ví dụ sau minh họa việc sử dụng bộ chọn cha trong tệp LESS -

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
      <title>Parent Selector</title>
   </head>

   <body>
      <h2>Welcome to TutorialsPoint</h2>
      <ul>
         <li><a>SASS</a></li>
         <li><a>LESS</a></li>
      </ul>
   </body>
</html>

Tiếp theo, tạo tệp style.less .

style.less

a {
   color: #5882FA;
   &:hover {
      background-color: #A9F5F2;
   }
}

Bạn có thể biên dịch tệp style.less thành style.css bằng cách sử dụng lệnh sau:

lessc style.less style.css

Thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

style.css

a {
   color: #5882FA;
}

a:hover {
   background-color: red;
}

Trong ví dụ trên, & đề cập đến bộ chọn a.

Đầu ra

Làm theo các bước sau để xem cách mã trên hoạt động -

Lưu mã html ở trên trong parent_selector1.htm tập tin.
Mở tệp HTML này trong trình duyệt, kết quả sau sẽ được hiển thị.

Các selectors Chánh điều hành có nhiều công dụng như thế nào, khi bạn cần phải kết hợp selectors sự cai trị lồng nhau trong cách nào khác hơn so với mặc định. Một cách sử dụng điển hình khác của&là tạo tên lớp lặp đi lặp lại. Để biết thêm thông tin bấm vào đây .