权重排行（高到低）
1、行内样式
（!important）
2、ID选择器
#id
2、ID选择器
#id
4、类型和伪元素选择器
div, ::before
权重向量
(0, 0, 0, 0)
(行内样式，ID选择器，class/属性/伪类选择器/，类型/伪元素)• 1
• 2
权重相同，定义靠后优先
实例
<div id="container">
<div id="container">
<ul class="menu">
<li id="item1" class="item1">项目1</li>
<li class="item2">项目1</li>
<li class="item3">项目1</li>
</ul>
</div>
<style>
/ (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
}
</style>
最终效果
</div>