根據內容在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內容

回答

相關問題