为什么常规 CSS 规则会覆盖 CSS 中的媒体查询？

媒体查询和 CSS 优先级

在 CSS 中，媒体查询的优先级低于常规 CSS 规则。这是由 CSS Cascade 决定的，CSS Cascade 是一组规定样式应用顺序的规则。

为什么媒体查询的优先级较低

媒体查询没有增加选择器的特异性。这意味着，如果常规 CSS 规则和媒体查询以相同的特异性定位相同元素，则常规 CSS 规则将优先。

示例：

考虑以下代码：

.logo img {
  width: 100%;
}

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

在此示例中，媒体查询的优先级低于非媒体查询规则。因此，当视口大小与媒体查询匹配时，非媒体查询规则仍然适用，导致图像宽度设置为 100%。

解决方法

要将媒体查询优先于常规 CSS 规则，有两个选项：

1。交换规则顺序

重新排序 CSS 规则，使媒体查询位于非媒体查询规则之后：

.logo img {
  width: 100%;
}

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

2.增加选择器特异性

通过添加额外的选择器来增加媒体查询规则的特异性：

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

避免！重要

做不要使用“!important”声明来覆盖媒体查询的优先级。这将导致过度使用“!important”并使管理 CSS 特异性变得困难。

以上是为什么常规 CSS 规则会覆盖 CSS 中的媒体查询？的详细内容。更多信息请关注PHP中文网其他相关文章！