CSS selector priority with! Important weights use

The CSS selector priority with! Important weights use

.classThe selector is higher than the tag selector.
#idSelector higher than the .classselector.
The tag selector is the lowest priority selector.
!importantAttribute value of its weight with the highest priority, is greater than all the selectors.

Label selector and selector .class

Let us enter the tag selector and .classselectors who have higher priority practice, practice content such as: the HTMLpage h2tab to set the text color.
Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优先级</title>
    <style>
        h2{
           color: red; /*红色*/
       }
       .box{
            color: springgreen; /*绿色*/
       }
    </style>
</head>
  
<body>
    <h2 class="box">微笑是最初的信仰</h2>
</body>
</html>

Results Figure

.class selectors and id selectors

Let's move .classselector and idselectors who have higher priority practice, practice content such as: the HTMLpage h2tab to set the text color.
Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优先级</title>
    <style>
       h2{
           color: red; /*红色*/
       }
       .box{
            color: springgreen; /*绿色*/
       }
       #box{
           color:blue; /*蓝色*/
       }
    </style>
</head>
  
<body>
   <h2 class="box" id="box">微笑是最初的信仰</h2>
</body>
</html>

Results Figure

! Important weights use

Now we know the tag selector lowest priority, then I add the tag selector !importantattribute it, who the higher priority it?
! Important weight using the following format:

    color: red !important; /*红色*/

Note: The 属性：值 !importantattribute value can be separated by a space.
Let us enter the !importantproperty using the practice, take a look at !importantproperty how much power ha.
Block

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>!important使用</title>
    <style>
       h2{
           color: red !important; /*红色*/
       }
       .box{
            color: springgreen; /*绿色*/
       }
       #box{
           color:blue; /*蓝色*/
       }
    </style>
</head>
  
<body>
   <h2 class="box" id="box">微笑是最初的信仰</h2>
</body>
</html>

Results Figure

to sum up

From low to high priority, such as: the tag selector, .classa selector, #ida selector, !importantProperties

CSS selector priority with! Important weights use

The CSS selector priority with! Important weights use

Label selector and selector .class

.class selectors and id selectors

! Important weights use

to sum up

Guess you like