Why is the `top` property not being overridden by another selector when targeting: after element

I have two rules that target the same element:

.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;
}

      

        
        
        
      

    

And another one that overrides the property top

:

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

      

        
        
        
      

    

I can clearly see how they are applied to an element in Chrome tools:

But nobody overrides the other. I don't understand how this can be.