更改特定div媒体查询中父元素的类样式

Question

当屏幕尺寸达到900px时，我希望我的.container元素的宽度为100％。问题是我在每个页面都使用.container，只想影响＃sub-top div中.container的外观。

对我来说最难的是术语，但我认为这是我能够描述的最接近的。

正如你在下面看到的那样，我试图让.container类在达到900px或更小的屏幕尺寸时达到100％而不是85％。

@media
.container{
 width: 85%;
 height: auto;
}
#sub-top{
 background-color: gray;
 height: auto;
}

@media (min-width: 900px) {
#sub-top .container {
 width: 100% !important;
 height: auto;
  }
}

<div id="sub-top">
   <div class="container">
	 <div class ="content">	
      <p> HERE IS CONTENT </p>
	 </div>	
   </div>
</div>





 

Answer 1

请改为尝试：

@media screen and (max-width: 900px) {
  #sub-top .container {
    width: 100%;
    height: auto;
  }
}

Answer 2

这有效：

  .container {
  width: 85%;
  height: auto;
  background-color: gray;
}

#sub-top {
  height: auto;
}

@media (max-width: 900px) {
  #sub-top .container {
    width: 100% !important;
    height: auto;
  }