Html 使用后代选择器的响应式网站

我试图使用媒体查询使我的网站响应，但是当我在我代码的某些部分使用后代选择器时，页面没有响应

当我使用此代码时，页面响应：

.div1{
  float: left;
  width:20%;
  height: 200px;
  background-color:red;
  border: 1px solid #f2f2f2;
  margin-left: 2%;
  border-radius: 50%;
}


.div2{
   float: left;
   width:20%;
   height: 200px;
   background-color:yellow;
   border: 1px solid #f2f2f2;
   margin-left: 2%;
   border-radius: 50%;
   }



 .div3{
     float: left;
     width:20%;
     border-radius: 50%;
     height: 200px;
     background-color:blue;
     border: 1px solid #f2f2f2;
     margin-left: 2%;
     }



  /* media queries*/
   @media screen and (max-width:800px) {
  .sec1 div{
   width:40% ;

    }
   }

每当我使用此代码时，页面响应时间更长：

.sec1 .div1{
  float: left;
  width:20%;
  height: 200px;
  background-color:red;
  border: 1px solid #f2f2f2;
  margin-left: 2%;
  border-radius: 50%;
}


.sec1 .div2{
   float: left;
   width:20%;
   height: 200px;
   background-color:yellow;
   border: 1px solid #f2f2f2;
   margin-left: 2%;
   border-radius: 50%;
   }



 .sec1 .div3{
     float: left;
     width:20%;
     border-radius: 50%;
     height: 200px;
     background-color:blue;
     border: 1px solid #f2f2f2;
     margin-left: 2%;
     }



  /* media queries*/
   @media screen and (max-width:800px) {
  .sec1 div{
   width:40% ;

    }
   }

---

请注意，代码之间的区别是在div类之前添加了类sec1（在媒体查询之前）。我的问题是，为什么后一种代码不起作用？

发布html PleaseEyes，如果没有html，我们只能说

.div1

可能不在

.sec1

中。