Tài liệu CSS chạy trực tiếp: !important

Q: Làm sao ghi đè !important?

Bằng một khai báo !important khác có độ ưu tiên cao hơn, hoặc có cùng độ ưu tiên và đứng sau trong stylesheet. Một style inline có !important thắng mọi !important trong stylesheet.

Q: !important có ghi đè được inline style không?

Có. Một khai báo trong stylesheet có !important thắng khai báo bình thường trong thuộc tính style. Nó không thắng được một khai báo inline cũng được đánh dấu !important.

!important trong CSS: cách hoạt động và khi nào nên dùng

!important giúp một khai báo thắng các khai báo bình thường, bất kể độ ưu tiên của chúng. Tìm hiểu chính xác nó thắng được gì, cái gì thắng được nó, độ ưu tiên selector hoạt động thế nào bên dưới, và những cách gọn gàng hơn để giải quyết xung đột kiểu.

Trang này có trình soạn thảo chạy trực tiếp. Sửa, chạy và xem đầu ra ngay lập tức.

Bởi Kevin Spektor, Đồng sáng lập và CTO

Đăng ngày Sep 24, 2026

!important làm gì

Thêm !important sau một giá trị giúp khai báo đó thắng mọi khai báo bình thường của cùng thuộc tính trên cùng phần tử. Độ ưu tiên của selector và thứ tự trong mã nguồn không còn quan trọng nữa.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>!important</title>
  <style>
    #intro { color: #2563eb; }           /* ID: very specific */
    .warning { color: #f59e0b !important; } /* class, but important */
  </style>
</head>
<body>
  <p id="intro" class="warning">Amber: !important beats the ID selector.</p>
</body>
</html>

Nếu không có !important, selector ID sẽ thắng và chữ sẽ có màu xanh dương. Xóa !important trong trình soạn thảo để thấy điều đó.

Cú pháp

selector {
  property: value !important;
}

Nó đứng sau giá trị và trước dấu chấm phẩy. Nó chỉ áp dụng cho đúng một khai báo đó, không cho cả quy tắc. Nó cũng dùng được trong cách viết tắt (margin: 0 !important; làm cả bốn cạnh đều important) và trong thuộc tính style.

Cái gì thắng cái gì

Với các kiểu do tác giả trang viết, từ yếu nhất đến mạnh nhất:

Hạng	Khai báo	Ví dụ
1	Khai báo bình thường trong stylesheet	`p { color: blue; }`
2	Khai báo bình thường trong thuộc tính `style`	`<p style="color: blue">`
3	`!important` trong stylesheet	`p { color: blue !important; }`
4	`!important` trong thuộc tính `style`	`<p style="color: blue !important">`

Trong cùng một hạng, độ ưu tiên quyết định, sau đó đến thứ tự xuất hiện của các khai báo: khai báo đứng sau thắng.

Đây là cách dùng !important chính đáng duy nhất trong công việc hằng ngày: ghi đè một inline style mà bạn không sửa được, chẳng hạn inline style do một widget bên thứ ba viết ra.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Beat inline</title>
  <style>
    .widget { background: #16a34a !important; }
    .widget-plain { background: #16a34a; }
    div { color: white; padding: 10px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <div class="widget" style="background: #2563eb;">Green: stylesheet !important beats inline.</div>
  <div class="widget-plain" style="background: #2563eb;">Blue: a normal rule loses to inline.</div>
</body>
</html>

Khi cả hai khai báo đều là !important

!important đối đầu với !important thì quay về các quy tắc thông thường: độ ưu tiên cao hơn thắng, và khi ngang nhau thì khai báo đứng sau thắng.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Two important</title>
  <style>
    p { padding: 8px; color: white; }
    .card p { background: #2563eb !important; }  /* (0,1,1) */
    p.note { background: #f59e0b !important; }  /* (0,1,1), later */
    p { background: #16a34a !important; }       /* (0,0,1) */
  </style>
</head>
<body>
  <div class="card"><p class="note">Amber: same specificity, later rule.</p></div>
  <p>Green: only the type rule matches.</p>
</body>
</html>

Đây là cách !important leo thang: một khi một quy tắc đã dùng nó, quy tắc cần ghi đè cũng phải dùng nó, và độ ưu tiên lại bắt đầu leo lên.

Độ ưu tiên selector trong một bảng

Độ ưu tiên (specificity) là trọng số của một selector. Đếm ba con số:

Cột	Những gì được đếm	Selector ví dụ	Độ ưu tiên
A	Selector ID	`#nav`	(1,0,0)
B	Class, thuộc tính, pseudo-class	`.btn`, `[type="text"]`, `:hover`	(0,1,0) mỗi cái
C	Selector kiểu, pseudo-element	`p`, `::before`	(0,0,1) mỗi cái
không	`*`, tổ hợp (`>`, `+`, `~`, dấu cách)	`*`, `ul > li`	không cộng thêm gì

So sánh cột A trước; chỉ khi ngang nhau mới xét đến B, rồi C. Vì vậy #nav a (1,0,1) thắng .menu .item .link a (0,3,1): một ID nặng hơn bất kỳ số lượng class nào.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Specificity</title>
  <style>
    #nav a { color: #16a34a; }                /* (1,0,1) wins */
    .menu .item .link a { color: #f59e0b; }  /* (0,3,1) */
    a { color: #2563eb; }                     /* (0,0,1) */
  </style>
</head>
<body>
  <nav id="nav" class="menu">
    <div class="item"><span class="link"><a href="#">Green link</a></span></div>
  </nav>
</body>
</html>

Hiểu bảng này là cách giúp bạn tránh !important: phần lớn vấn đề "CSS của tôi không được áp dụng" là do một quy tắc cụ thể hơn ở chỗ khác, có thể thấy trong bảng Styles của DevTools với khai báo của bạn bị gạch ngang.

Những cách thay thế gọn gàng hơn

Bằng độ ưu tiên, rồi dựa vào thứ tự. Tải stylesheet của bạn sau stylesheet của thư viện và dùng selector có độ ưu tiên ít nhất ngang bằng.
Hạ độ ưu tiên của quy tắc kia bằng :where(). Mọi thứ bên trong :where() đều tính là 0, nên kiểu nền viết bằng nó rất dễ ghi đè.
Dùng biến CSS làm điểm móc. Một component đọc var(--btn-bg) có thể được đổi giao diện mà không phải đấu với các selector của nó. Xem biến CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>where</title>
  <style>
    /* base styles with zero specificity */
    :where(#app .panel) { background: #e5e7eb; padding: 10px; }

    /* a plain class is enough to override */
    .highlight { background: #f59e0b; }
  </style>
</head>
<body>
  <div id="app">
    <div class="panel">Gray base style.</div>
    <div class="panel highlight">Amber, no !important needed.</div>
  </div>
</body>
</html>

Đặt !important từ JavaScript

element.style.color = 'red !important' không hoạt động: giá trị này không hợp lệ và bị bỏ qua. Dùng setProperty với đối số thứ ba:

el.style.setProperty('color', '#f59e0b', 'important');

Lỗi thường gặp

Đặt sai chỗ. color: !important red; không hợp lệ; nó phải đứng sau giá trị.
Dùng trong @keyframes. Các khai báo đánh dấu !important bên trong keyframes bị bỏ qua.
Sửa mọi xung đột bằng nó. Thay vào đó, tìm quy tắc đang thắng trong DevTools rồi dùng độ ưu tiên ngang bằng hoặc hạ độ ưu tiên của nó.
Mong nó ảnh hưởng đến thuộc tính khác. color: red !important không có tác dụng gì với background.
Quên rằng !important inline thắng của bạn. Không quy tắc nào trong stylesheet của trang ghi đè được style="color: red !important"; hãy sửa chính thuộc tính đó, chẳng hạn bằng JavaScript.

Câu hỏi thường gặp

!important trong CSS dùng để làm gì?

Nó cho một khai báo quyền ưu tiên hơn mọi khai báo bình thường của cùng thuộc tính trên cùng phần tử, bất kể độ ưu tiên của selector hay thứ tự. Viết nó sau giá trị: color: red !important;.

Làm sao ghi đè !important?

Bằng một khai báo !important khác có độ ưu tiên cao hơn, hoặc có cùng độ ưu tiên và đứng sau trong stylesheet. Một style inline có !important thắng mọi !important trong stylesheet.

!important có ghi đè được inline style không?

Có. Một khai báo trong stylesheet có !important thắng khai báo bình thường trong thuộc tính style. Nó không thắng được một khai báo inline cũng được đánh dấu !important.

Dùng !important có phải là thói quen xấu không?

Nếu dùng để thắng một cuộc chiến về độ ưu tiên thì có: lần ghi đè tiếp theo cũng sẽ cần !important, và stylesheet trở nên khó sửa. Nó hợp lý cho các utility class luôn phải được áp dụng (như .hidden), để ghi đè inline style của bên thứ ba, và trong stylesheet của người dùng.

Độ ưu tiên selector trong CSS được tính thế nào?

Đếm theo ba cột: selector ID, rồi class, thuộc tính và pseudo-class, rồi selector kiểu và pseudo-element. So sánh từng cột từ đầu, nên #nav a (1,0,1) thắng .menu .item a (0,2,1). Selector toàn cục * và các tổ hợp (combinator) không cộng thêm gì.

Khái niệm liên quan