来源：彻底说透css选择器的权重问题，编辑器的小提示平时注意了吗【渡一教育】

CSS选择器的权重是一个形如三维坐标(x,y,z)的值

  • x：选择器中id选择器的数量
  • y：类选择器+伪类选择器+属性选择器的数量
  • z：元素选择器+伪元素选择器的数量
1
2
3
4
5
6
7
#list {}  /* (1,0,0) */
div {}  /* (0,0,1) */
.box {}  /* (0,1,0) */
.box #list::before {}  /* (1,1,1) */
.box #list a::before {}  /* (1,1,2) */
.box .form input[type='text'] {}  /* (0,3,1) */
.box ul a:hover {}  /* (0,2,2) */

将x、y、z算出后，遵循一套流程决定权重大小

  1. 比较x，x大者胜出，相同则比较y
  2. 比较y，y大者胜出，还相同则比较z
  3. 比较z，z大者胜出，仍然相同则权重相同

在VSCode中，可以直接将鼠标移到选择器处查看权重，无需自己计算