如果element有一个image类型的子项 - 应用某些样式？

Question

这是我的HTML：

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

有时img-drop-zone中没有图像。

有没有办法在sass中定位这个，所以当img-drop-zone有一个子图像是一个图像时，设置.desc来显示：none

Answer 1

你不能在CSS中真正做到这一点（并且你知道Sass在应用之前被编译为CSS，因此存在相同的限制），因为你不能根据他们的孩子向父母添加任何内容（因此将内容添加到img-drop-zone表格img）。但是，您可以使用adjacent selector或任何sibling combinators来将元素应用于元素img。

或许这样的事情：

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

DEMO

但是因为你显然正在实现一些额外的功能（从“这里的丢弃图像”消息中扣除），你可能会使用某种javascript来做到这一点，然后我会说javascript会提供一些关于你想要的额外选项DOM操作（删除消息，添加类或其他在添加图像后会发生的事情，并允许您控制样式）。