First, what is the priority weights
1. Role: a plurality of selectors when mixed together, we can determine who again has the highest priority by calculating the weights.
2. Right heavy calculation rules
Common code:
<body>
<div id="identity1" class="box1">
<ul>
<li>
<p id="identity2" class="box2">试炼语句</p>
</li>
</ul>
</div>
</body>
web前端开发学习Q-q-u-n: ⑦⑧④-⑦⑧③-零①②,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
(1) First calculate how many selector id, id number of the highest priority selector;
example:
#identity1 .box2{
color: red;
}
.box1 .box2{
color: blue;
}
(2) if id as many selector, the multi-class selector priority level high
.box1 .box2{
color: blue;
}
div ul li p{
color: purple;
}
web前端开发学习Q-q-u-n:⑦⑧④-⑦⑧③-零①②,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
(3) If the number of the class name too much, so much the number of multi-tag number of high priority
#identity1 ul{
color: red;
}
#identity1 ul li p{
color: purple;
}
(4) If the above three are all the same, then who's behind who listen
#identity1 ul li{
color: blue;
}
#identity1 ul p{
color: red;
}
3. Note: only need to calculate only choice is to select the label directly
#identity1{
color: blue;
}
p{
color: red;
}