Question

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

Answer 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选择器覆盖媒体查询，媒体查询将被忽略。

Answer 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    { }
}

我怎样才能忽略css文件中的媒体查询？

2 个答案: