https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#additional_notes

A few things to remember about specificity:

Specificity only applies when the same element is targeted by multiple declarations in the same cascade layer or origin. Specificity

only matters for declarations of the same importance and same origin and cascade layer. If matching selectors are in different origins, the cascade determines which declaration takes precedence.

When two selectors in the same cascade layer and origin have the same specificity, scoping proximity is then calculated; the ruleset

with the lowest scoping proximity wins. See How @scope conflicts are resolved for more details and an example.

If scope proximity is also the same for both selectors, source order then comes into play. When all else is equal, the last selector

wins.

As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

Proximity of elements in the document tree has no effect on the 
specificity.

I that the CSS probably worked or came close but got nullified by one of these rules.