权重排行(高到低)
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>
最终效果