search

Home >Web Front-end >CSS Tutorial >Understand CSS selector priority and !important weight

Understand CSS selector priority and !important weight

青灯夜游
青灯夜游forward
2020-12-31 17:23:384291browse

Understand CSS selector priority and !important weight

Recommended: css video tutorial

Selector priority and !important weight in CSS

  • .classThe selector is higher than the label selector. The
  • #id selector is higher than the .class selector.
  • The tag selector is the selector with the lowest priority. The
  • !important attribute has the highest weight value priority, greater than all selectors.

Tag selector and .class selector

Let us enter the practice of which one has higher priority between the tag selector and the .class selector. The practical content is as follows : Set the text color of the h2 tag in the HTML page.

Code 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>

Result graph

Understand CSS selector priority and !important weight

.class selector and id selector

Let’s enter.class selector and id selector, which one has higher priority? Practice, the practice content is such as: setting the h2 tag in the HTML page Text color.

Code 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>

Result graph

Understand CSS selector priority and !important weight

!important weight usage

Now we know the tag selector priority The lowest level, so I added the !important attribute to the tag selector. Who has a higher priority?
!important weight usage format is as follows: 

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

Note: Attribute: value !importantAttribute values ​​can be separated by spaces.

Let's get into the !important attribute usage practice and see how powerful the !important attribute is.

Code 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>

Result graph

Understand CSS selector priority and !important weight

Summary

Priority from low to high such as: tag selector , .class selector, #id selector, !importantattribute

For more programming-related knowledge, please visit: Programming teaching! !

The above is the detailed content of Understand CSS selector priority and !important weight. For more information, please follow other related articles on the PHP Chinese website!

css html class 选择器
Statement：
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to turn a square into a circle in cssNext article：How to turn a square into a circle in css

Related articles

See more