Question

如何在@media中设置所有子元素而不添加所有类。

.wrapper＆gt; *似乎不起作用，不确定原因。

这是一个简单的例子：

  .wrapper {
  width: 100%;
}

.wrapper .left {
  background-color: #2196F3;
  float: left;
  width: 50% !important;
}

.wrapper .right {
  background-color: #4CAF50;
  float: right;
  text-align: right;
  width: 50% !important;
}

@media (max-width:400px) {
  .wrapper>* {
    width: 100%;
    text-align: center;
  }

<div class="wrapper">
  <div class="left">
    Left Menu<br><br><br><br>
  </div>

  <div class="right">
    Right Content<br><br><br><br>
  </div>
</div>


<p>Resize the browser window.</p>

<p>Make sure you reach the breakpoint at 400px when resizing this frame.</p>

Answer 1

您的问题是CSS特异性，您正在使用覆盖媒体查询的CSS的!important，而是需要在媒体查询中添加重要内容：

为什么你需要！在媒体查询中很重要？

.wrapper .right具有比.wrapper > *更多的特定性，因此您需要添加重要内容才能使用此选择器在媒体查询中应用样式。

.wrapper {
  width: 100%;
}

.wrapper .left {
  background-color: #2196F3;
  float: left;
  width: 50%;
}

.wrapper .right {
  background-color: #4CAF50;
  float: right;
  text-align: right;
  width: 50%;
}

@media (max-width:800px) {
  .wrapper > * {
    width: 100%!important;
    text-align: center!important;
  }
}

<div class="wrapper">
  <div class="left">
    Left Menu<br><br><br><br>
  </div>

  <div class="right">
    Right Content<br><br><br><br>
  </div>
</div>


<p>Resize the browser window.</p>

<p>Make sure you reach the breakpoint at 400px when resizing this frame.</p>

Answer 2

试试这个：

 .wrapper {
  width: 100%;
}

.wrapper .left {
  background-color: #2196F3;
  float: left;
  width: 50%;
}

.wrapper .right {
  background-color: #4CAF50;
  float: right;
  text-align: right;
  width: 50%;
}

@media (max-width: 400px) {
  .wrapper .left,
  .wrapper .right {
    width: 100%;
  }
}

<div class="wrapper">
  <div class="left">
    Left Menu<br><br><br><br>
  </div>

  <div class="right">
    Right Content<br><br><br><br>
  </div>
</div>


<p>Resize the browser window.</p>

<p>Make sure you reach the breakpoint at 400px when resizing this frame.</p>

为您的div删除!important，并确保@media部分中的规则{3}没有弱于主要部分中应用的规则。

此外，使用通用选择器（*）并不是最好的主意，因为它没有特异性值。因此，.wrapper > *具有（0,0,1,0）特异性，而早先定义的.wrapper .left和.wrapper .right具有（0,0,2,0）强度大于（0,0,2,0），1,0）因此，他们赢了。

虽然在这种情况下并不重要，但样式从右到左解析。因此，在右侧使用“*”可能会使浏览器更难/更慢地解析和应用样式。

同样!important使整个风格更难以维护和理解，因此除非完全必要，否则可以安全地避免它。

@media设置所有包装子元素

2 个答案: