如何忽略 css 文件中的媒体查询？答案

【问题标题】：How can i ignore media queries in css file?如何忽略 css 文件中的媒体查询？
【发布时间】：2018-06-28 03:27:06
【问题描述】：

我有一个使用带有媒体查询的 css 文件的 Web 项目。其中一个页面正在使用相同的 css 文件，但我不希望它使用此 css 文件上的媒体查询。我怎么能忽略它们？

【问题讨论】：

删除它或使用/* */ 对其发表评论...“忽略它们”到底是什么意思。
我想你想要一些 CSS 说：“现在忽略这个”。我不知道这样的事情。
@HerrSerker 我们可以在 CSS 中覆盖，这将导致 CSS 忽略覆盖的样式
@Danield 当然，但这不是忽略。您必须知道媒体查询中的 CSS 选择器和规则才能覆盖它们。但这可能很乏味，并且不会在未来保存，因为可能会向媒体查询添加样式。
@HerrSerker - 一种更简单的覆盖方法是将媒体查询移动到 css 文件的顶部 - 我更新了我的帖子

【解决方案1】：

如果您想忽略媒体查询（并且不想只是出于某种原因将它们注释掉），那么一个简单的方法就是将所有媒体查询移到顶部 CSS 文件。

这样，相同的类将覆盖媒体查询中的样式。例如：

@media (max-width: 600px) { /* or whatever the media query is */
  .class {
    /*styles here */
  }
}
.class {
/*styles here */
}

或者，（如果上述方法不可行），您可以 向选择器（媒体查询选择）添加特异性，例如：

.class.class {   /* <-- added specificity */
  /*styles here */
}

@media (max-width: 600px) { /* or whatever the media query is */
  .class {
    /*styles here */
  }
}

现在 .class 选择器将覆盖媒体查询，媒体查询将被忽略。

【讨论】：

在选择器中使用相同的类两次以增加特异性。不错的技巧
谢谢，但我不想评论媒体查询，因为其他页面正在使用它们。也将媒体查询移到顶部对其他页面没有帮助。
对于您不想要媒体查询的页面：假设该页面中的容器元素具有类'page1'，然后将特定性添加到媒体的选择器查询选择形式为.page1 .class { /* style here */ }

【解决方案2】：

您可以使用 :not() 属性为您不希望在 css 中应用查询样式的选择器取反...

.page{ /* Styles that apply to all ".page" elements before media query */ }

@media (min-width: 768px) {
  /* Defines styles for elements with the "page" class */
  .page:not(:first)     { 
      /* Excludes first matching element with "page" class */ }
  .page:not(.firstpage) { 
      /* Excludes elements with the "firstpage" class */ }
  .page:not(#firstpage) { 
      /* Excludes element with id="firstpage" */ }

那么如果你想在激活媒体查询时只对排除的页面做一些事情，你可以添加...

   .page(:first) { } 
     /* or */
   .firstpage    { } 
     /* or */
   #firstpage    { }
}

【讨论】：