CSS Precedence Oddity - "#id tag">"#tagId" Why?

I find it very illogical that the selector for an element inside an #id has precedence over the #id of that element.

Disclaimer: I am aware there are many similar questions floating around. I have also read up on CSS precedence and specificity documentation. However none of these questions and documentation seem to cover this specific problem I have, not to mention explaining why. Maybe I'm just bad at searching; in that case, please guide me. But I digress.

For example, take the following HTML:

<style>
  #top button {
    padding: 0;
  }
  #myButton {
    padding: 2em;
  }
</style>
<header id="top">
  <button type="button" id="myButton">Button</button>
</header>

For some reason, the button comes out with no padding. Inspect element shows that the style of #myButton is overridden.

Isn't #myButton, which always selects a unique element, more specific than #top button, which selects multiple buttons under a unique element?

Is this a bug or an intended feature? How standard is this behavior across browsers? And if a feature, why?

Tested with Chrome 78 and Edge 44 (EdgeHTML 18) on Windows 10.