Dấu hoa thị (*) làm gì trong bộ chọn CSS?

Question

tôi thấy mã CSS này và tôi chạy nó để xem những gì nó và nó vạch ra mọi phần tử trên trang web,

Ai đó có thể giải thích những gì Asterisk * không trong CSS?

<style> 
* { 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 } 
</style> 

Answer 1

Đó là ký tự đại diện, điều này có nghĩa là nó sẽ chọn tất cả các phần tử trong phần đó của DOM.

Ví dụ, nếu tôi muốn áp dụng biên độ cho mọi phần tử trên toàn bộ trang web của tôi bạn có thể sử dụng:

* { 
    margin: 10px; 
} 

Bạn cũng có thể sử dụng điều này trong sub-selections, ví dụ sau đây sẽ thêm một biên độ cho tất cả các yếu tố trong một thẻ đoạn:

p * { 
    margin: 10px; 
} 

dụ bạn đang làm một số thủ đoạn gian trá css để áp dụng biên giới liên tiếp và lợi nhuận đến các yếu tố để cung cấp cho họ nhiều biên giới màu. Ví dụ, một đường viền màu trắng được bao quanh bởi một đường viền màu đen.

Answer 2

* là ký tự đại diện. Điều đó có nghĩa là nó sẽ áp dụng kiểu cho bất kỳ phần tử HTML nào. Bổ sung * áp dụng kiểu cho mức lồng nhau tương ứng.

Công cụ chọn này sẽ áp dụng các đường viền màu khác nhau cho tất cả các thành phần của trang, tùy thuộc vào cấp độ lồng của các yếu tố.

Answer 3

* hoạt động như một ký tự đại diện, giống như trong hầu hết các trường hợp khác.

Nếu bạn làm:

*{ 
    margin: 0px; 
    padding: 0px; 
    border: 1px solid red; 
} 

Sau đó tất cả phần tử HTML sẽ có những phong cách.

Answer 4

CSS mà bạn đã tham chiếu rất hữu ích cho nhà thiết kế web để gỡ lỗi các vấn đề về bố cục trang. Tôi thường thả nó vào trang tạm thời để tôi có thể thấy kích thước của tất cả các phần tử trang và theo dõi, ví dụ, một phần có quá nhiều đệm đang đẩy các phần tử khác ra khỏi vị trí. Cùng một mẹo có thể được thực hiện chỉ với dòng đầu tiên, nhưng lợi thế của việc xác định nhiều phác thảo là bạn nhận được một đầu mối trực quan thông qua màu đường viền cho cấu trúc phân cấp của các phần tử trang lồng nhau.

Answer 5

trong biểu định kiểu của bạn, thông thường bạn cần xác định quy tắc cơ bản cho tất cả các phần tử như thuộc tính kích thước phông chữ và lề. {font-size: 14px; lề: 0; padding: 0;} / vượt qua cài đặt mặc định của trình duyệt trên các phần tử, tất cả kích thước phông chữ văn bản sẽ được hiển thị dưới dạng kích thước 14 pixel, không lề và đệm, bao gồm h1, ... trước. */