Bộ chọn * * CSS làm gì?

Gần đây tôi tình cờ gặp * *trong CSS .

Tham khảo trang web - Liên kết trang web .

Đối với một *cách sử dụng duy nhất trong CSS style sheet, Internet và Stack Overflow tràn ngập các ví dụ, nhưng tôi không chắc chắn về việc sử dụng hai * *biểu tượng trong CSS.

Tôi đã truy cập vào nó, nhưng không thể tìm thấy bất kỳ thông tin liên quan nào về điều này, vì một đơn vị *chọn tất cả các phần tử, nhưng tôi không chắc tại sao trang web lại sử dụng nó hai lần. Phần còn thiếu cho điều này là gì, và tại sao bản hack này được sử dụng (nếu nó là một bản hack)?

Cũng giống như bất kỳ lần nào bạn đặt hai bộ chọn lần lượt (ví dụ li a), bạn sẽ nhận được bộ tổ hợp con. Vì vậy, * *bất kỳ phần tử nào là con của bất kỳ phần tử nào khác - nói cách khác, bất kỳ phần tử nào không phải là phần tử gốc của toàn bộ tài liệu.

Chỉ là một ví dụ nhỏ:

Cố gắng thêm điều này trên trang web của bạn:

* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }

Demo: http://jsfiddle.net/l2aelba/sFSad/

Ví dụ 2:

Demo: http://jsfiddle.net/l2aelba/sFSad/34/

* *Phù hợp với tất cả mọi thứ trừ các yếu tố cấp cao nhất, ví dụ html.

* có nghĩa là áp dụng các kiểu đã cho cho tất cả các phần tử.

* *nghĩa là áp dụng các kiểu đã cho cho tất cả các phần tử con của phần tử. Thí dụ:

body > * {
  margin: 0;
}

Điều này áp dụng kiểu lề cho tất cả các phần tử con của body. Cùng một cách,

* * {
  margin: 0;
}

áp dụng margin: 0cho *các phần tử con của. Tóm lại, nó áp dụng margin: 0cho hầu hết mọi yếu tố.

Nói chung, một cái *là đủ. Không cần hai * *.

Điều đó chọn tất cả các phần tử được lồng bên trong một phần tử khác theo cách tương tự div asẽ chọn tất cả các <a>phần tử được lồng ở đâu đó bên trong một <div>phần tử.