html - 根据里面的内容在 div 上编辑 CSS

Question

我有两个 div，一个带有文本，第二个带有图像。

所以对于第一个带有图像的 div (draggableTemplate)，我需要用 padding:0 设置 CSS

到第二个带有文本的 div(draggableTemplate) 我需要设置 CSS with padding:10%

<div class="draggableTemplate">
    <img src="images/logo-blue.png" >
</div>

<div class="draggableTemplate">
    <span> Hello world...  </span>
</div>

我需要这样的东西:

.draggableTemplate has: child(img) {
    //that have img child
    padding:0;
}

.draggableTemplate  has: child(span){
    //that have span
    padding:10%;
}

我需要将 css 设置为内部有图像的 parent，并为内部有 span 的父级设置 difrante css

将 css 设置为 PARENT 而不是子

Answer 1

您不能使用 CSS 选择特定 child 的 parent。

一种方法是使用 JQ，例如，函数 has()

参见此处jsfiddle

JQ:

$(".draggableTemplate").has("img").css({"padding":"0"});
$(".draggableTemplate").has("span").css({"padding":"10%"});

或者像这样: jsfiddle

$(".draggableTemplate").has("img").addClass("has_img")
$(".draggableTemplate").has("span").addClass("has_span")

使用 CSS

.has_img{
  padding:0;
}
.has_span{
  padding:10%;
}

有很多方法可以不仅使用 CSS