css - 基于类定位非嵌套 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;
}

我将如何仅更改包含该类的页面的 css shop-main？

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

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

此外，我不能嵌套 div 或在页面上使用其他 div。

Answer 1

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

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