Question

我是否可以将text-align:center添加到div.wpb_wrapper作为第一个孩子的所有h1？我需要这样做的原因之一是，有多个div.wpb_wrapper具有相同的父级，但并非所有父级都有<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;。这就是我需要为父母设计风格的原因。

Answer 1

截至目前，您无法访问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中心。我只想在div作为第一个孩子H1时将文字居中。我无法将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");
});

Answer 2

不幸的是，你只能用CSS做到这一点。

如果你已经在使用jQuery，你可以这样做：

使用Javascript：

        Robot robot = new Robot();
        robot.delay(5000);
        robot.keyPress(KeyEvent.VK_CONTROL);
        robot.keyPress(KeyEvent.VK_SHIFT);
        robot.keyPress(KeyEvent.VK_E);
        robot.delay(100);
        robot.keyRelease(KeyEvent.VK_E);
        robot.keyRelease(KeyEvent.VK_SHIFT);
        robot.keyRelease(KeyEvent.VK_CONTROL);

CSS：

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

我如何设置div的样式，但只有当H1作为其第一个孩子时？

2 个答案: