为什么非媒体查询有时会覆盖 CSS 中的媒体查询？

媒体查询与非媒体查询：了解 CSS 特异性

在 CSS 中，媒体查询用于根据设备屏幕应用样式大小或其他视口特征。然而，我们经常观察到，与常规 CSS 声明相比，媒体查询的优先级似乎较低。

优先级较低的原因

此行为源于 CSS 级联的概念。当多个规则针对同一元素时，浏览器会根据规则的特殊性对规则进行优先级排序。具有较高特异性的选择器将覆盖具有较低特异性的选择器。

媒体查询本身并不会增强选择器的特异性。因此，如果非媒体查询选择器和媒体查询选择器具有相同的特异性，则当媒体查询不相关时，非媒体查询选择器将优先。

示例：

考虑以下 CSS 片段：

.logo img {
    width: 100%;
}

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

在此示例中，非媒体查询规则定义了一个徽标图像的默认宽度为 100%。但是，当屏幕宽度落在指定范围内时，会激活媒体查询并将宽度设置为 120%。

但是，如果屏幕宽度超出此范围，则非媒体查询规则将采用优先级，覆盖媒体查询的宽度设置。

增加的解决方案优先级

提升媒体查询的优先级：

1. 交换规则集的顺序：

   • 将媒体查询规则移至非媒体查询规则下方以利用级联

2. 增加选择器特异性：

   • 通过添加额外的标签或属性来增强媒体查询选择器的特异性选择器。例如，将其更改为 .logo 图像会增加其特异性。

3. 使用 !important（警告）：

   • 此方法涉及在媒体查询规则中添加“!important”。然而，由于它可能会导致维护问题，因此不鼓励这样做。

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