In CSS, ‘!important’ is a keyword that we use with the values of the CSS properties. When we use the ‘!important’ with the CSS property value, the browser gives more importance to that property value over the other property values on the same element.
Here are some use cases where we require to use the ‘!important’ with the CSS property values.
In the content management System (CMS), we can’t edit the CSS of the web page. So, if we add extra CSS to the web page, it can’t get applied to the specific element, but if we use ‘!important’ with CSS, we can override the initial values of particular CSS properties.
Whenever we use any UI library in web frameworks such as ReactJS, Svelte, etc., we sometimes can’t edit the CSS of the UI component. In such cases, we can use the ‘!important’ with CSS properties to override their values.
The real-time application contains large CSS files. Sometimes, CSS doesn’t affect the element due to unknown overriding. In this case, we can use ‘!important’ to override all values of a particular property on the particular element.
Users can follow the syntax below to use the ‘!important’ with the CSS property values.
CSS-property: value !important
In the above syntax, CSS-property can be any CSS property such as margin, padding, padding-left, font-size, etc., and value be respected value for the CSS property.
In the example below, we have created three div elements with the class names ‘black’, ‘grey’, and ‘red’. In CSS, we have given the background color to the div element based on the class names.
Also, we have applied the ‘background-color: pink’ CSS property to all the div elements with the ‘!important’ keyword. In the output, users can observe that all div’s background color becomes pink as we have used the ‘!important’.
<html>
<head>
<style>
.black {background-color: black;}
.grey {background-color: grey;}
.red {background-color: red;}
div {
background-color: pink !important;
margin: 5px;
}
</style>
</head>
<body>
<h2> Using the <i> !important </i> with CSS property values </h2>
<div class = "black">
This is a black div.
</div>
<div class = "grey">
This is a grey div.
</div>
<div class = "red">
This is a red div.
</div>
</body>
</html>
In the example below, we have created two different paragraphs. One paragraph contains the ‘one’ class name, and another contains the ‘two’ as a class name. We have applied some CSS to all <p> elements.
To override the CSS of an element with the class name ‘one’, we have used the ‘!important’ keyword to override the style applied on the ‘<p>’ element. In the output, users can observe that the first paragraph has different styles.
<html>
<head>
<style>
p {
padding: 20px;
background-color: #f1f1f1;
border: 1px solid #ccc;
border-radius: 5px;
}
.one {
background-color: green !important;
border: 5px dotted blue !important;
}
</style>
</head>
<body>
<h2> Using the <i> !important </i> with CSS property values </h2>
<p class = "one"> This is a paragraph. </p>
<p class = "two"> This is another paragraph. </p>
</body>
</html>
We will learn to override the ‘!important’ by using another ‘!important’ via the example given below. We have created the three div elements with the ‘initial’, ‘middle’, and ‘final’ class names.
We have used the ‘!important’ with the background-color CSS property, which we are applying to div elements. So, Initially, all div elements’ background is aqua. After that, we again used the ‘!important’ with the background-color CSS property while applying it to the elements with the class names ‘middle’ and ‘final’.
In the output, users can observe that blue and lightsalmon colours override the ‘aqua’ colour.
<html>
<head>
<style>
div {
background-color: aqua !important;
margin: 10px;
padding: 5px;
}
.middle {background-color: blue !important;}
.final {background-color: lightsalmon !important;}
</style>
</head>
<body>
<h2> Using the <i> !important </i> with CSS property values </h2>
<div class = "initial">
This is an initial Div element.
</div>
<div class = "middle">
This is a middle Div element.
</div>
<div class = "final">
This is a final Div element.
</div>
</body>
</html>
Users learned to use the ‘!important’ in CSS. Basically, we should avoid the overuse of the ‘!important’; otherwise, it can become a headache for anyone to solve lots of ‘!important’ as it overrides the CSS for the element.
However, users can use ‘!important’ while updating the CSS of any library's content management system or a UI component.
以上就是为什么我们应该使用!important？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
336
收藏
