Can't override user agent stylesheet rules even via style attribute?

Issue

I'm using Ublock Origin browser extension that hides ads by injecting css rules into user agent stylesheet:

a[href^="https://ad.doubleclick.net/"] {
    display: none !important;
}

It hides the link even with style attribute:

there should be a link:
<a href="https://ad.doubleclick.net/" style="display: block !important">example1</a>

Even though devtools shows the style attribute should be overriding that rule:

The computed style seems to disagree (the link remains hidden):

A similar css rule in "user stylesheet" can be overwritten by style attribute no problem:

a[href^="https://example.net/"] {
    display: none !important;
}

there should be a link:
<a href="https://example.net/" style="display: block !important">example2</a>

Is this a browser bug? Is there a work around this?

Edge 119.0.2151.44
Windows 10 x64

Solution

The observed behavior appears to follow the hierarchy that https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade#cascading_order outlines.

The origin "author (developer)" with importance !important comes at position 5 in the (ascending) order in which these things take priority, whereas "user-agent (browser)" with !important is at position 7, and therefor overrules the author stylesheet.

So the interpretation by the browser appears to be correct here; and the bug would be on the dev tools side, which do not "visualize" this correctly.

Answered By - CBroe