为什么`top`属性在定位时不被另一个选择器覆盖：在元素之后

Question

我有两个针对同一元素的规则：

.tree-collapsed > .tree-label > .b-node-selector-widget__tree-node > span:after {
  content: "";
  position: absolute;
  top: 13px;
  right: 21px;
  display: block;
  border-left: 5px solid #616366;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

另一个覆盖top属性：

treecontrol treeitem > ul > li.tree-collapsed > div > .b-node-selector-widget__tree-node > span:after {
  top: 8px;
}

我可以清楚地看到它们都应用于Chrome工具中的元素：

但是没有一个覆盖另一个。我不明白这是怎么回事。

Answer 1

如果您计算specificity，您会看到第一个选择器具有更高的特异性

.tree-collapsed > .tree-label > .b-node-selector-widget__tree-node > span:after

具有0-0-4-1

的特异性

treecontrol treeitem > ul > li.tree-collapsed > div > .b-node-selector-widget__tree-node > span:after

具有0-0-3-6

的特异性

41＆gt; 36，第一个选择器获胜。