根据类定位非嵌套div

Question

我有一个代码如下所示的页面：

<div class="shop-main">
  <!-- CONTENT -->
</div>
<div class="social-tabs">
  <!-- CONTENT -->
</div>

在移动设备上，我需要在包含social-tabs的每个网页上将display:none;更改为shop-main。但是，正如您所看到的，它们不是嵌套的，因此我无法写：

.shop-main .social-tabs{ 
   display:none;
}

如何仅更改包含类shop-main的网页的css？

注意：我省略了上面的媒体查询，但我的目标是此范围内的设备：

@media (min-width:641px) and (max-width:980px){ /* CSS */  }

此外，我无法嵌套div或使用页面上的其他div。

Answer 1

您需要在媒体查询中使用兄弟选择器：

.shop-main + .social-tabs { 
   display:none;
}