Rediscover !important

    !important indicates that a CSS declaration is "important". !important changes the rules for which CSS declaration is used in a CSS cascade. If a CSS declaration is not important, it is called a normal declaration. We only need to add !important to the value of a CSS declaration, and at least one space must be added, there can be spaces between ! and important, but usually there is no space

    .box {
    border-radius: 10px; /* normal declaration */
     font-size: 18px ! important; /* ok, but not recommended */
    background-color: red !important; /* ok, but not recommended */
    }
    

    Affect cascading rules

    In the cascading rules, there are three common style sheets, and their priorities decrease in order

    • author stylesheets: the most common stylesheets, written by web developers
    • user stylesheets: In most browsers, users of the website can use custom user stylesheets to override the website's styles. Depending on the browser, user stylesheets can be configured directly or added through browser extensions.
    • user-agent stylesheets: Browser default stylesheets.

    Once !important is applied, the priority is completely reversed. User-agent's !important stylesheets have priority over user-owned !important stylesheets; user-owned !important stylesheets have priority over author-owned !important Style sheet priority. For example, we can use the ad blocker plug-in to block a certain element on the page. Originally, the author style sheet has a higher priority than the user style sheet, but because the CSS declaration in the user style sheet uses !important, its priority is This in turn overrides the !important CSS declaration in the author's stylesheet.

    Therefore, even if we add more display: block !important; to the author style sheet, it will not help, the calculated property of the element display is still none. This means that when using the ad blocker plug-in to block page elements, the website developer has no ability to override the user stylesheets of the plug-in s reason.

    Inverting the priority of the important style sheet meets some special requirements of users, such as changing the font size of the browser, thereby overriding the style sheet written by the web developer. Similarly, the priority of the important statement in the user-agent style sheet is higher It will also prevent some malicious plug-ins from damaging page functions, etc.


    Relationship to animation and transition

    The first thing to note is that declarations in @keyframes cannot use !important

    All important declarations take precedence over animation declarations

    transition takes precedence over important declarations. When a CSS property transitions from one value to another, the property will not match a particular important declaration.

    cascade layer

    There are three sources of style sheets (more than three, only three are discussed here), namely user-agent stylesheets browser default style, user stylesheets added through browser configuration or browser plug-ins, and author stylesheets written by web developers.
    Normal declarations outside the cascade level take precedence over normal declarations within the cascade level; if normal declarations are in different cascade levels, then the normal declaration in the last cascade level declared takes precedence Highest. See @layer for specific rules.

    If !important is used, then the precedence is reversed. The important declarations in the cascading layers declared first have higher priority than the important declarations in the cascading layers declared later, and at the same time, the important declarations in all cascading layers take precedence The priority of important is higher than that outside the cascade layer

    !important and weights

    Regarding priority and weight, I personally think that CSS style sheets from different sources are "priority", and CSS rules from the same source are "weight".
    !important does not affect the weight of a CSS rule, but it does matter. If two CSS rules have different weights, the style with !important wins, regardless of the weight

    <div class="box7" id="box7">Where are you from?</div>
        #box7.box7 {
      color: red;      
    }
    .box7 {
      color: green !important;
    }
    

    If two CSS rules are important rules, the one with the higher weight wins


    !important and shorthand properties

    Using !important in a shorthand property makes all properties included in the shorthand property !important

    p.smile {
      border-top: 1px solid black;
    }
    .smile {
      border: 5px solid red !important;
    }
    

    Although .smile has a lower weight than p.smile, but the !important in border makes border-top-width also important, so it wins.


    !important and custom variables

    :root {
      --custom-bg-color: pink !important;
      --custom-bg-color: skyblue;
    }
    

    If !important is added to the CSS variable declaration, !important will only work when it is assigned. That is, it will work when copying pink to the variable --custom-bg-color, because if there is no !important, --custom-bg The value of -color should be skyblue. After assignment, !important is "shedded" from the custom attribute, and !important is not passed when using the var() function.

    .box8 {
      background-color: var(--custom-bg-color);
      background-color: red;
    }
    

    The background color of the running result .box8 is red, because the two CSS declarations about the background color are general declarations.


    !important Best Practices

    Avoid overriding weights with !important . If you just want to create important declarations, you should add a comment to your code explaining why and telling other developers not to override important.

    Even if you want to override high-weight styles that are not under your control, such as the styles of third-party libraries that use id selectors, you don't need to use !important. You can consider introducing third-party style files in the first cascading layer. As long as If !important is not included in the third-party style, your own style will override the third-party style.

    If you really need to override the important styles in the external style sheet, still consider creating a cascading layer and include the CSS rules for overriding in the cascading layer, and declare this cascading layer as the first cascading layer. We to explain how this should be done

    First create the .box9 element in index.html, and import index1.css through the link tag

    <link rel="stylesheet" href="index1.css">
    <div class="box9"></div>
    

    Write the style of .box9 in index1.css, and import index2.css as the simulated external style

    @layer basement;
    @import "./index2.css" layer(basement);
    
    .box9 {
      width: 100px;
      height: 100px;
      background-color: green;
    }
    

    Below is the code of index2.css

    .box9 {
      background-color: blueviolet !important;
    }
    

    It can be seen that the background color of .box9 in the page is purple at this time, because if the CSS declaration in the cascade layer has the !important flag, its priority will be higher than that of the external CSS declaration that is not in the cascade layer.

    In order to override the external important, we must also use the following features: the priority of the important in the cascading layer declared first is higher than the important in the cascading layer declared later. So modify index1.css.

    @layer haha, basement;
    @import url(index2.css) layer(basement);
    
    @layer haha {
      .box9 {
        background-color: green !important;
      }
    }
    
    .box9 {
      width: 100px;
      height: 100px;
      background-color: green;
    }
    

    We first created two cascading layers without any rules, and then introduced external style resources respectively, and added CSS for coverage in the haha cascading layer. Here is a point worth noting @layer haha, basement; in haha is declared first, and basement is declared second.

    Popular posts from this blog

    大学资料分享——广工计院各个科目实验报告、课设及期末复习资料!!

    Win10 远程计算机或设备将不接受连接

    JAVA Traffic Signal Light Course Design (Source Code + Report + Video Demonstration)

    Implementation of Ajax Interceptor