css - 如何设计一个 div，但前提是它的第一个 child 是 H1？

Question

有什么方法可以添加 text-align:center所有 div.wpb_wrapper其中有 h1作为第一个 child ？我需要这个的原因之一是有多个 div.wpb_wrapper具有相同的父级，但并非所有都有 <h1>作为第一个 child 。

在下面的示例中，我只想设置第二个 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;已经申请了。这就是为什么我需要为父项设置样式。

Answer 1

目前您无法在 CSS 中访问父级。但是你可以这样做:

替代解决方案

由于没有 CSS Parent Selector，我们可以应用 text-align: center对于所有兄弟元素和 <h1>本身是这样的:

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

这将适用 text-align: center给所有的 sibling 。这样，<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:

I want to style the second div only. I do not want to center the text in the first div. I only want to center text in the div when it has an H1 as the first child. And I can't apply text-align center to h1 because it is has 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");
});