我的媒体查询未生效

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）

问题可能是父＆gt;与孩子有关吗？

提前致谢！

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;
  }
}