可以通过@media 查询部分覆盖规则吗？

Question

我想使用媒体查询为不同的设备稍微修改我的 CSS。理想情况下，我想创建一个类或规则的基线版本，然后仅部分覆盖它，如下所示：

.myClass {
    font-family:Helvetica;
    color:#333333;
    font-size:20px;
}

@media screen and (min-width: 1000px) {
    .myClass {
        font-size:30px;
    }
}

我的问题是，对于匹配媒体查询的屏幕，.myClass 将完全替换基线（从而消除字体和颜色属性值对），还是保留这些和只覆盖 font-size 值？

这似乎有效，但我想知道这是否是预期的行为。谢谢！

Answer 1

它将保留这些并且仅覆盖font-size 值。换句话说，当媒体查询完成时，它的行为与：

.myClass {
    font-family:Helvetica;
    color:#333333;
    font-size:20px;
}

.myClass {
    font-size:30px;
}

如果没有，第二条规则就会消失，只留下第一条。

这是预期行为； @media 规则不会以任何方式影响级联，只是仅在特定条件下应用随附的规则。

如果您只需要应用一个规则或另一个（即规则需要互斥），您有两种选择：

1. 重置第二条规则中的 font-family 和 color 声明：

   .myClass {
       font-family:Helvetica;
       color:#333333;
       font-size:20px;
   }
   
   @media screen and (min-width: 1000px) {
       .myClass {
           font-family:inherit;
           color:inherit;
           font-size:30px;
       }
   }
   

2. 将第一条规则包含在媒体查询的否定版本中：

   @media not screen and (min-width: 1000px) {
       .myClass {
           font-family:Helvetica;
           color:#333333;
           font-size:20px;
       }
   }
   
   @media screen and (min-width: 1000px) {
       .myClass {
           font-size:30px;
       }
   }
   

查看我对这些类似问题的回答以获得更详细的文章：

• What are the rules for CSS media query overlap?
• How can I avoid media query overlap?