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

Tôi đã tìm thấy mã CSS này và tôi đã chạy nó để xem nó hoạt động gì và nó phác thảo MỌI phần tử trên trang,

Ai đó có thể giải thích những gì Dấu hoa thị * làm trong CSS không?

<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>

Nó là một 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 lợi nhuận cho mọi phần tử trên toàn bộ trang của mình, bạn có thể sử dụng:

* {
    margin: 10px;
}

Bạn cũng có thể sử dụng điều này trong các lựa chọn phụ, ví dụ như phần sau sẽ thêm lề cho tất cả các phần tử trong thẻ đoạn:

p * {
    margin: 10px;
}

Ví dụ của bạn đang thực hiện một số thủ thuật css để áp dụng các đường viền và lề liên tiếp cho các phần tử để tạo cho chúng nhiều đường viền màu. Ví dụ: viền trắng bao quanh viền đen.

CSS mà bạn đã tham chiếu rất hữu ích cho một 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ể xem kích thước của tất cả các phần tử của trang và theo dõi, chẳng hạn như phần tử có quá nhiều phần đệm đang đẩy các phần tử khác ra khỏi vị trí.

Thủ thuật tương tự có thể được thực hiện chỉ với dòng đầu tiên, nhưng lợi ích của việc xác định nhiều đường viền là bạn có được manh mối trực quan thông qua màu đường viền cho hệ thống phân cấp của các phần tử trang lồng nhau.

* là một 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 * sẽ áp dụng kiểu cho một cấp độ lồng tương ứng.

Bộ chọn này sẽ áp dụng các đường viền màu khác nhau cho tất cả các phần tử của trang, tùy thuộc vào mức độ lồng ghép của các phần tử.

* 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ả các phần tử HTML sẽ có các kiểu đó.

trong biểu định kiểu của mình, 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;} / overide 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 với lề và đệm bằng không, bao gồm h1, ... trước. * /