Dấu chấm than (!) trong CSS

Dấu chấm than ! trong CSS không phải là một phần của cú pháp CSS chuẩn. Tuy nhiên, trong một số trường hợp, dấu ! có thể xuất hiện nếu bạn sử dụng các CSS frameworks như Tailwind CSS hoặc trong trường hợp sử dụng một số công cụ CSS tùy chỉnh, và nó được hiểu như một chỉ thị quan trọng (important).

Giải thích về !important trong CSS

Trong CSS, dấu ! được sử dụng trong cụm !important để ưu tiên áp dụng thuộc tính đó bất kể thứ tự của các quy tắc CSS.

Ví dụ:

Trong ví dụ này, thuộc tính overflow: visible được áp dụng ngay cả khi có các thuộc tính khác được định nghĩa trước hoặc sau nó cho cùng một phần tử.

Trường hợp !overflow-visible trong các frameworks CSS

Nếu bạn gặp class !overflow-visible trong code của mình, thì rất có thể nó đến từ một framework như Tailwind CSS hoặc các CSS library tương tự. Các framework này thường sử dụng cú pháp với ! trước thuộc tính để chỉ thị cho các thuộc tính được ưu tiên áp dụng với !important mà không cần viết thủ công !important trong CSS.

• Ví dụ trong Tailwind CSS:

• Trong Tailwind CSS, class !overflow-visible có nghĩa là thuộc tính overflow: visible được áp dụng với !important, nhằm ghi đè bất kỳ quy tắc overflow nào khác đã được thiết lập trước đó.

Cách sử dụng

• Nếu bạn muốn đảm bảo một thuộc tính CSS được áp dụng mà không bị ghi đè bởi các quy tắc khác, sử dụng ! để thêm !important vào thuộc tính trong các framework như Tailwind.
• Nếu bạn đang không sử dụng một framework như Tailwind và nhìn thấy class với !, có thể bạn đang nhìn nhầm hoặc cần kiểm tra lại tài liệu của framework bạn đang dùng.

Tóm lại

Dấu ! trong class !overflow-visible là một cú pháp đặc biệt của một số framework CSS như Tailwind CSS để thêm !important vào thuộc tính overflow: visible. Nó không phải là cú pháp CSS thuần mà là cú pháp tùy chỉnh của framework.