权重排行(高到低)
1、行内样式
(!important)
2、ID选择器
#id
2、ID选择器
#id
4、类型和伪元素选择器
div, ::before
权重向量
(0, 0, 0, 0)
(行内样式,ID选择器,class/属性/伪类选择器/,类型/伪元素)• 1
• 2
权重相同,定义靠后优先
实例
项目1
项目1
/ (0, 1, 3, 1) /
#container .menu.menu li.item2 {
color: #ff4757;
}
/ (0, 1, 2, 1) /
#container li:nth-child(2).item2 {
color: #7bed9f;
}
/ (0, 1, 1, 1) /
#container li.item2 {
color: #ffa502;
}
/ (0, 0, 1, 1) /
li.item2 {
color: #5352ed;
}
/ (0, 0, 1, 0) /
.item2 {
color: #ff6b81
}
最终效果
</div>