根据内容在div上编辑CSS内容

我有两个div，一个是跨度有文本，另一个是图像。根据内容在div上编辑CSS内容

因此，要在第一个div（draggableTemplate）与图像I需要设置CSS与填充：0

和所述第二个div（draggableTemplate）与文本我需要填充设置CSS：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设置为父有图像内difrante CSS的父里面

设置css来家长没有孩子

来源

2016-07-14 Vova Potapov

的[应用CSS样式的元素根据其子元素]可能的复制（HTTP ：//sackoverflow.com/questions/2326499/apply-css-styles-to-an-element-depending-on-its-child-elements） – ca8msm

他们是没有办法在CSS中，你可以根据他们的孩子选择父。那“有：”选择器仍处于编辑器草稿可能在选择器级别4中可用。您可以使用jQuery来实现此目的。 –

你不能与CSS选择特定childparent跨度。要做到这一点

一个方法是使用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

来源

2016-07-14 14:41:45

“唯一的办法就是使用JQ” - 这是非常错误的。你不需要使用jQuery来使用javascript来做到这一点。 – ndugger

是的。你是对的。想要说你不能用css做thia –

根据内容在div上编辑CSS内容

回答

相关问题