如果元素具有 image 类型的子元素 - 应用某些样式

Question

这是我的HTML：

<li>
    <div class="img-drop-zone">
       <img src="myimage.jpg">
       <div class="desc">drop img here</div>
    </div>
</li>

有时 img 拖放区中没有图像。

有没有办法在 sass 中定位它，以便当 img-drop-zone 有一个子图像时，将 .desc 设置为 display：none

Answer 1

你不能在 CSS 中真正做到这一点（如你所知，Sass 在应用之前被编译为 CSS，所以那里有同样的限制），因为你不能根据他们的孩子向父母添加任何东西（因此冒泡东西以img-drop-zone形式img）。但是，您可以使用相邻的选择器或任何同级组合器将内容应用于元素（如果它们遵循img）。

也许是这样的：

.img-drop-zone img + .desc {
  display:none;
}

演示

但是由于您显然正在实现一些附加功能（从"将图像拖放到此处"消息中扣除），并且您可能会使用某种 javascript 来做到这一点，那么我会说 javascript 会提供一些关于您想要的 DOM 操作的其他选项（删除消息、添加类或添加图像后会发生的其他事情并允许您控制样式）。