Important Css: Cách thăng hạng, bật chế độ ưu tiên, ghi đè thuộc tính css – Unitop.com.vn

Posted on by mtoplistChuyên mục:Top List

Important Css là một quy tắc giúp cho một style css nào đó được ưu tiên hơn các phần còn lại nếu khi có cùng selector.

Cú pháp

selector{
    property: value!important;
}

Bạn lưu ý !important thêm đằng sau nhằm mục đích thông báo cho trình biên dịch biết đây là style cần phải được ưu tiên. Để bạn nắm rõ hơn bây giờ chúng ta đến với ví dụ.

Ví dụ: Ưu tiên đoạn văn có màu đỏ 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Important Css</title>
</head>
<body>

<style>
    p {
        color: red;
        font-size: 16px;
    }
    p {
        color: green;
    }
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ut?</p>

</body>
</html>

Trong ví dụ trên bạn thấy thẻ p được css 2 lần cho thuộc tính color. Theo thứ tự ưu tiên khi có cùng selector và cùng tác động vào cùng thuộc tính thì code css viết bên dưới sẽ được ưu tiên lên bên trên.

Theo đó màu sắc của thẻ p lúc đầu có color: red tuy nhiên sau đó được cập nhập bởi color: green.

Bây giờ nếu chúng ta muốn thẻ p được ưu tiên dùng màu đỏ thì chúng ta chỉ cần làm như sau. 

    p {
        color: red!important;
        font-size: 16px;
    }

Ta có code hoàn chỉnh

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Important Css</title>
</head>
<body>

<style>
    p {
        color: red!important;
        font-size: 16px;
    }
    p {
        color: green;
    }
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ut?</p>

</body>
</html>

Tổng kết

Qua bài này tôi đã chia sẻ đến bạn về việc sử dụng important trong css. Tuy nhiên trên thực tế bạn cần cân nhắc khi sử dụng important, chỉ dùng khi thực sự cần thiết.

Ngay bây giờ bạn cần thực hành lại bài này để nắm chắc thêm một nội dung quan trọng trong css.

Xin chào, sớm hẹn gặp lại!

mtoplist