Under what circumstances can a CSS rule with specificity 0-0-1 override one with specificity 0-1-0?

In the screenshot below, you can see that a font-family declaration with a rule specificity 0-0-1 is taking precedence over one with specificity 0-1-0.

My understanding is that order of rules only matters when specificity is equal, which is not the case here.

Notably, even adding !important to the class name selector has no effect on the outcome.

Chrome and Firefox both exhibit the same behavior here, so I assume whatever is happening is to spec.

Under what circumstances would the behavior in the screenshot be expected?

there are various reasons to this though:

The html, body rule might be taking precedence because of inheritance from the top level elements html, body for certain properties like font-family, even though the .className_36bd41 rule exists.

inherited properties can sometimes override lower level selectors in certain contexts if the property is inherited naturally by child elements.

Some browsers and CSS frameworks apply reset styles or normalize styles that could affect element selectors like html and body. These reset styles might force an override unless handled explicitly.

Ensure that .className_36bd41 appears after html, body in the CSS file. If html, body is loaded later in the cascade, it will override the class unless overridden with !important.

Add a more specific selector to .className_36bd41, such as .classname_36bd41 div or even .classname_36bd41 * to see if it changes the behavior.

You can then try forcing the rule by using font-family: sans-serif !important;inside the .className_36bd41 rule to ensure that the class level style is not overridden by higher level styles.