我如何設計一個div，但前提是它有一個H1作爲第一個孩子？

有沒有一種方法，我可以添加text-align:center於具有h1作爲第一個孩子的所有div.wpb_wrapper？我需要的原因之一是有多個div.wpb_wrapper有相同的父母，但不是全都有<h1>作爲第一個孩子。我如何設計一個div，但前提是它有一個H1作爲第一個孩子？

在下面我只想樣式第二DIV的例子。

<div class="wpb_wrapper"> 
    <h2>Other text</h2> 
    <p>Other text</p> 
</div> 
<div class="wpb_wrapper"> 
    <h1>Text</h1> 
    <h2>Other text</h2> 
    <p>Other text</p> 
</div>

編輯：我不能申請text-align center於H1，因爲它已經申請display: inline-block;。這就是爲什麼我需要風格的父母。

來源

2016-04-25 Metzed

不能訪問父在CSS截至目前。抱歉。 :( –

不能樣式根據孩子的純CSS條件的父母。反正在jQuery中，你可以做到這一點很容易 –

@Quentin，這是很糟糕。我們知道，有沒有CSS家長選擇，但OP需要一個有效的解決方案。這不是一個騙局。 –

不能在CSS訪問父截至目前。但是你可以做這樣的事情：

替代的解決方案

既然沒有CSS家長選擇，我們可以申請text-align: center爲所有的兄弟姐妹的元素和<h1>本身是這樣的：

.wpb_wrapper > h1:first-child, 
.wpb_wrapper > h1:first-child ~ * { 
    text-align: center; 
}

這將適用text-align: center所有的兄弟姐妹。這樣，<h2>和<p>標籤將被對齊中心。

讓我們試一下：

.wpb_wrapper > h1:first-child, 
 
.wpb_wrapper > h1:first-child ~ * { 
 
    text-align: center; 
 
}

<div class="wpb_wrapper"> 
 
    <h2>Other text</h2> 
 
    <p>Other text</p> 
 
</div> 
 
<div class="wpb_wrapper"> 
 
    <h1>Text</h1> 
 
    <h2>Other text</h2> 
 
    <p>Other text</p> 
 
</div>

按照OP：

我只想樣式的第二個div。我不想將文字居中在第一個div。我只想在第一個孩子有H1時將文本置於div中。而且我不能將text-align中心應用到h1，因爲它具有display: inline-block;。

所以，唯一的辦法是：

.wpb_wrapper > h1:first-child ~ * { 
    text-align: center; 
}

或者使用JavaScript或jQuery和使用.closest()這樣：

$(".wbp-wrapper > h1:first-child").each(function() { 
    $(this).closest(".wbp-wrapper").css("text-align", "center"); 
});

來源

2016-04-25 11:50:29

我真的不明白'-1'的原因，因爲我可以清楚地證明這個解決方案完美無瑕。 –

看清楚問題。 '中心'屬性應該適用於父'div'而不是兄弟姐妹。 – niyasc

@niyasc在這種情況下有什麼區別？不要像機器一樣思考。如果不是，我們需要解決方案，替代方案。這是一個使用純CSS的替代方案。 –

可惜你不能做到這一點與CSS只。

如果您已經使用jQuery你可以這樣做：

的Javascript：

$('.wbp-wrapper > h1:first-child').each(function(){ 
    $(this).closest('.wbp-wrapper').addClass('centered'); 
});

CSS：

.centered { 
    text-align: center; 
}

來源

2016-04-25 12:09:26 beerwin

我如何設計一個div，但前提是它有一個H1作爲第一個孩子？

回答

相關問題