为什么我们应该使用!important？

王林转载: 2023-08-23 21:45:02 749浏览

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.

Syntax

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.

Example

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>

Example

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>

Example

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>

Conclusion

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中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：使用CSS实现向右弹出动画效果下一条：当一个元素的内容可能比分配给它的空间更大时，应该怎么办？