Home > Article > Web Front-end > Understand CSS selector priority and !important weight
Understand CSS selector priority and !important weight
- 青灯夜游forward
- 2020-12-31 17:23:384216browse
Recommended: css video tutorial
Selector priority and !important weight in CSS
-
.classThe selector is higher than the label selector. The -
#idselector is higher than the.classselector. - The tag selector is the selector with the lowest priority. The
-
!importantattribute 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
.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
!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
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!