我的媒体查询没有生效

Question

我在使用媒体查询时遇到了一些问题。这是一个非常基本的事情，但由于某种原因无法正常工作。

基本上，我在 div 标签周围有一个边框：

<div class="container games mobile">
    <div class="row">
        <div class="col-lg-8 div border"> 
<!-- This div tags are closed at the end of the file -->

我正在使用引导程序，但我真的不知道这是否是问题的一部分，但我想做的是在用户使用手机时删除该边框，为此，我添加了以下内容我的css文件中的行：

@media screen and (max-width: 600px) {
       .border {
        border: none;
    }
}

Border on computer

Border on mobile 即使我使用了查询

（在两个打印件上都添加了一个灰色方块，因为内容并不需要在这里，但可以找到实时预览here）

问题可能与父母>孩子有关吗？

提前致谢！

Answer 1

它不起作用，因为它被引导代码覆盖。试试这个：

@media (max-width: 600px) {
       .border {
        border: none !important;
    }
}

Answer 2

在此处使用css specificity，而不是使用!important。为什么不!important？

@media screen and (max-width: 600px){
  .games.mobile .border {
      border: none;
  }
}