css - 如果元素有图像类型的子元素 - 应用某些样式？

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 有一个 child 是图像时，将 .desc 设置为 display:none

Answer 1

你不能在 CSS 中真正做到这一点(正如你所知，Sass 在应用之前会被编译成 CSS，所以那里有相同的限制)，因为你不能根据他们的 child 向 parent 添加任何东西(因此冒泡的东西到img-drop-zone 格式 img)。但是，您可以使用 adjacent selector或任何sibling combinators如果元素遵循 img，则将其应用到元素。

也许是这样的:

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

DEMO

但由于您显然正在实现一些附加功能(从“将图像放在这里”消息中扣除)，并且您可能会使用某种 javascript 来执行此操作，那么我想说 javascript 会提供一些与您所需的附加选项DOM 操作(删除消息、添加类或添加图像后会发生的其他事情，并让您控制样式)。