Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Selector Priority level </title>
<!--
CSS styles Follow the principles
1. The same type of selection follows the nearest principle, the superposition principle
2. Different types of selectors have priority level: important > Inline > ID selector >
Class \ Tag Selector | pseudo-Class | Property selection | pseudo-element > tag Selector > Wildcard > Inheritance
-
<style>
/* Composite Selector */
DIV.TEXT1 {
Color:orange;
}
/*id Selector (weight value 100) */
#main {
Color:rebeccapurple;
}
#second {
Color:darkslategrey;
}
/* Class selector (weight 10) */
. Text1 {
Color:green;;
}
. text2 {
Color:yellow;
}
/* Tag Selector (weight 1) */
The weight of the/*important is the highest. */
div {
Color:red!important;
}
/* wildcard character (weight 0)
1. Very low priority level
2. Poor performance
*/
*{
font-size:30px;
}
</style>
<body>
<div id= "main" class= "Text1 text2" style= "Color:yellow;" > I am the test priority level </div>
</body>CSS Tag type
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
