Why Do Regular CSS Rules Override Media Queries in CSS?

Media Queries and CSS Priority

In CSS, media queries are less prioritized than regular CSS rules. This is determined by the CSS Cascade, a set of rules that dictate the order in which styles are applied.

Why Media Queries Have Less Priority

Media queries do not increase the specificity of selectors. This means that if a regular CSS rule and a media query target the same element with the same specificity, the regular CSS rule will take precedence.

Example:

Consider the following code:

.logo img {
  width: 100%;
}

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
    width: 120%;
  }
}

In this example, the media query has less priority than the non-media query rule. Therefore, when the viewport size matches the media query, the non-media query rule will still apply, resulting in the image width being set to 100%.

Workarounds

To prioritize media queries over regular CSS rules, there are two options:

1. Swap Rule Order

Reorder the CSS rules so that the media query comes after the non-media query rule:

.logo img {
  width: 100%;
}

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
    width: 120%;
  }
}

2. Increase Selector Specificity

Increase the specificity of the media query rule by adding additional selectors:

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo a img {
    width: 120%;
  }
}

Avoid !important

Do not use the "!important" declaration to override the priority of media queries. This will lead to excessive use of "!important" and make it difficult to manage CSS specificity.

The above is the detailed content of Why Do Regular CSS Rules Override Media Queries in CSS?. For more information, please follow other related articles on the PHP Chinese website!