css - Correct use of !important

admin管理员组

文章数量:1332395

I'm new to CSS so forgive me if this is obvious.

I have the following code for aligning my site logo to the left-hand side. And it works exactly as I want it to.

    /* Align site logo to the left */
    .site-logo {
      float: left !important;
      padding-top: 15px;
    }

However, I have read that it is (usually) bad practice to make use of !important and that it may create problems at a later date.

When should !important be used? In the example above, how would you achieve the desired result without using it? (I've tried various things all to no avail ;-) )

Thanks

I'm new to CSS so forgive me if this is obvious.

I have the following code for aligning my site logo to the left-hand side. And it works exactly as I want it to.

    /* Align site logo to the left */
    .site-logo {
      float: left !important;
      padding-top: 15px;
    }

However, I have read that it is (usually) bad practice to make use of !important and that it may create problems at a later date.

When should !important be used? In the example above, how would you achieve the desired result without using it? (I've tried various things all to no avail ;-) )

Thanks

• css

Share Improve this question edited May 12, 2020 at 9:39 Richie asked May 12, 2020 at 9:04 RichieRichie 122 bronze badges 3

• 1 That means you have already defined float rule before this CSS, either you have to check for the CSS sequence as well as repeatative rules for same class. – Baikare Sandeep Commented May 12, 2020 at 10:10
• 1 It's safer to override with more specific styles that don't use !important, but that depends on the surrounding code. For example, you could likely set the float on body .site-logo or header .site-logo - again depending on the HTML - and that would be more specific than the style you're trying to override, so it would create the float without using !important. !important is always a very last resort and usually reserved for overriding vendor styles which are overly specific and should be simplified. – WebElaine Commented May 12, 2020 at 14:31
• 1 Thank you both for your insights. Much appreciated. @WebElaine ' header .site-logo ' worked :-) Thank you for this. – Richie Commented May 12, 2020 at 19:20

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

The !important property in CSS is used to provide more weight (importance) than normal property. In CSS, the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule and the !important keyword must be placed at the end of the line, immediately before the semicolon.

• In other words, it adds importance to all the sub-properties that the shorthand property represents.
• In normal use, a rule defined in an external style sheet which is overruled by a style defined in the head of the document, which in turn, is overruled by an inline style within the element itself (assuming equal specificity of the selectors).
• Defining a rule with the !important attribute that discards the normal concerns as regards the later rule overriding the earlier ones.
• So, it is used for overriding the styles that are previously declared in other style sources, in order to achieve a certain design.

!important used to override exiting css eg. normal css

 h1{font-size:44px;}  

!important using css

h1{font-size:44px!imporatant;}

If you want use !important like css but not include !important every time to override exciting site just call your custom css file below the main themes / template file css mean 2nd line. eg. mycustom.css is your custom file

    <link rel="stylesheet" type="text/css" href="themestyle.css" >
    <link rel="stylesheet" type="text/css" href="mycustom.css" >

本文标签： cssCorrect use of important