Bộ chọn con ngay lập tức trong LESS

Question

Có cách nào để có LESS áp dụng bộ chọn con ngay lập tức (>) trong đầu ra của nó không?

Trong style.less của tôi, tôi muốn viết một cái gì đó như:

.panel { 
    ... 
    > .control { 
     ... 
    } 
} 

và chỉ còn lại ít tạo ra một cái gì đó như:

.panel > .control { ... } 

Answer 1

CẬP NHẬT

Trên thực tế, các mã trong câu hỏi ban đầu hoạt động tốt. Bạn chỉ có thể gắn bó với bộ chọn con >.

---

Tìm câu trả lời.

.panel { 
    ... 
    >.control { 
     ... 
    } 
} 

Lưu ý việc thiếu khoảng trắng giữa ">" và ".", Nếu không nó sẽ không hoạt động.

Answer 2

Cách chính thức:

.panel { 
    & > .control { 
    ... 
    } 
} 

& luôn đề cập đến việc chọn hiện hành.

Xem http://lesscss.org/features/#features-overview-feature-nested-rules

Answer 3

Ngoài ra, Nếu bạn đang nhắm mục tiêu các phần tử con đầu tiên, chẳng hạn như <td> đầu tiên của một <tr>, bạn có thể sử dụng một cái gì đó như thế này:

tr { 
    & > td:first-child {font-weight:bold;} 
} 

này giúp giảm khai báo lớp khi họ không cần thiết.

Answer 4

Cú pháp chính xác sẽ theo sau trong khi sử dụng '&' sẽ không cần thiết ở đây.

.panel{ 
    > .control{ 
    } 
} 

Theo less guidelines, '&' được sử dụng để parameterize tổ tiên (nhưng không có nhu cầu như vậy ở đây). Trong this less example, &: di chuột là cần thiết trên : di chuột nếu không nó sẽ dẫn đến lỗi cú pháp. Tuy nhiên, không có yêu cầu cú pháp như vậy để sử dụng '&' tại đây. Nếu không, tất cả các tổ sẽ yêu cầu '&' vì chúng chủ yếu đề cập đến cha mẹ.