[CSS] Thuộc tính !important – Online Web Development Tutorials

Cách đây không lâu khi tôi đang sử dụng WordPress và có nhu cầu cài đặt thêm plugin, lúc tôi cài mới 1 plugin thì đã có sự xung đột về file stylesheet với plugin cũ, cả hai đều sử dụng một class tên “left” nên khi cài đặt xong thì giao diện bị vỡ. Sự thay đổi tên class trong file CSS của các plugin khá khó khăn vì nó đụng chạm đến cấu trúc plugin đó. Và tôi quyết định dùng một thuộc tính trong CSS hỗ trợ khá tốt trong trường hợp trên, đó là !important .

Để hiểu rõ hơn về thuộc tính này, các bạn hãy xem các ví dụ dưới đây

Ví dụ 1,

Thông thường một đối tượng có nhiều thuộc tính được khai báo giống nhau thì nó sẽ lấy giá trị của cái cuối cùng.

p .text { font-size: 11pt; }
....
p .text { font-size: 15pt; }

Nếu class text có giá trị như trên thì cỡ chữ sẽ là 15pt.

Ví dụ 2,

Nếu chúng ta sử dụng thuộc tính !important thì nó sẽ ưu tiên thực thi giá trị đó và không bị ghi đè bởi các giá trị khác.

Why largo homeowners choose quartz kitchen countertops granitedepotasheville.com. https://artmight.com/user/profile/775379

p .text { font-size: 11pt !important; }
....
p .text { font-size: 15pt; }

Trong trường hợp này thì class text sẽ có cỡ chữ là 11pt thay vì 15pt .

Ví dụ 3,

Điều gì sẽ xảy ra nếu các thành phần đều sử dụng thuộc tính này, câu trả lời rất đơn giản, nó sẽ tương tự như ví dụ 1, tức là nó sẽ lấy giá trị của thành phần chứa !important cuối cùng.

p .text { font-size: 11pt !important; }
....
p .text { font-size: 15pt !important; }

Với ví dụ này thì class text sẽ có cỡ chữ 15pt.

Ví dụ 4,

Khi lập trình web, người ta thường tách phần CSS và HTML ra những file riêng biệt để dễ quản lý. Bây giờ chúng ta sẽ xét các tình huống có thể xảy ra với trường hợp này.

// Trong file CSS
p {
font-size: 20pt;
}
// Trong file HTML
<p style="font-size:15pt">
Welcome to tanvietblog.info !
</p>

Nếu các thuộc tính có giá trị ngang nhau như trong trường hợp này thì HTML sẽ ưu tiên cho giá trị trong các thẻ tag hơn là liên kết bên ngoài, tức là thẻ p sẽ có cỡ chữ 15pt.

// Trong file CSS
p {
font-size: 20pt !important;
}
// Trong file HTML
<p style="font-size:15pt">
Welcome to tanvietblog.info !
</p>

Nhưng nếu bạn thêm !important vào file CSS thì cỡ chữ thẻ p sẽ bị ghi đè và thay vào đó là giá trị 20pt.

Ví dụ 5,

Tuy nhiên, khi bạn thêm thuộc tính này vào file HTML thì cỡ chữ sẽ là 11pt

// Trong file CSS
p {
font-size: 20pt !important;
}
// Trong file HTML
<p style="font-size:15pt !important">
Welcome to tanvietblog.info !
</p>

Lưu ý,

Thuộc tính này được hầu hết các trình duyệt web hỗ trợ, ngoại trừ Internet Explore (IE) như IE6, có thể IE7.