Description

I'm trying to override inline rules, e.g. .wp-container-1 > *, using rules in a stylesheet referenced through an enqueued stylesheet. The specificity of this selector is 0,1,0.

Using the selector .wp-block-group in the theme CSS is also 0,1,0 and so it should be able to override the inline rule.

However, it cannot because inline styles take precedence over any linked stylesheets.

See also #36135 in particular, as well as #35840, #34047, #29705, #17511 and #39971.

Step-by-step reproduction instructions

Enqueue a stylesheet containing the following CSS. The max-width doesn't override the inline core CSS unless !important is used.

(In practice, the rule is being applied to a custom block with a custom class name, which must always be full-width and whose max-width - or alignment - may not be adjusted in the editor. The example class name .wp-block-group is only being used here for example purposes.)

(The use of !important introduces a large number of subsequent priority rule problems and a large number of experts have been advising against it for a very long time. e.g. MDN Web Docs.)

Screenshots, screen recording, code snippet

.wp-block-group {
    max-width: 1000px;
}

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes