The subject of your selector is .dropdown
:
body#myid .mt-site-nav .quick-more .dropdown
The subject of the selector within the @media screen
rule is a
:
.dropdown li a
Since each selector is matching a different element, specificity does not come into play. Your rule applies to the .dropdown
element, and the native default applies to the a
elements inside it. That's why you see that both rules are being applied. And since the font-size
values are in pixels, the a
elements will continue to have a 12-pixel font size.
Duplicating the li a
portion is not fragile; it's a proper solution (if not the only one) to this sort of problem. Cascading happens on a per-element basis, and if you're not dealing with relative values or inheritance, then targeting the wrong elements isn't going to work as you expect.
Also, screen
is a media type (and more extensively a media query), not a selector, and @media
rules do not affect the cascade other than to enable or disable the rules inside them depending on whether the media applies to the browser.