specificity of declarations vs browser's for a

Question

for instance if we have a css

#toolbar {color: white; background: black;} 

and we know the specificity is 0,1,0,0

and toolbar has some links.

<div id="toolbar">
    <a href="#link">Link1</a>
</div>

and probably the browser stylesheet says

 a:link {color: blue;}

hence specificity 0,0,1,0

in that case our style for color should have won against browser's, but why links still get blue.

Answer 1

Your rule applies to #toolbar. The browser's rule applies to a. If you want to inherit your #toolbar rule, you could say

a:link { color: inherit; }

Specificity works on an element-by-element basis. A high-specificity rule on a parent has no specificity-related impact on a child. Even an !important on a parent would not affect the specificity calculation for the child directly. The exception would be when the property is inheritable (meaning the child has an implicit property: inherit; setting), and there is no explicit rule (including in the browser stylesheet) applying to that property for the child.