Question

我试图选择标题元素后面的每个第一段元素（例如h2）。然而，由于包装在div中，我最终选择了几个＆＃34;第一个＆＃34;段落元素。是否可以仅选择CSS组合器后面的段落元素？我的HTML是这样的：

<div>
  <h2>Header</h2>
</div>
<div>
  <div>
    <p>Here goes my first paragraph. This is what I need to select.</p>
    <p>Here goes my second paragraph</p>
    <p>Here goes my third paragraph</p>
  </div>
</div>
<div>
  <div>
    <p>Here goes my fourth paragraph and I don't want to select this one.</p>
  </div>
</div>

这个CSS最终会选择第一个以及我打算成为第四个段落：

p:first-of-type{
  text-indent: 0;
}

所以我尝试使用这样的CSS：

div * h2 + div * p:first-of-type{
  text-indent: 0;
}

但它不起作用。那么甚至可以将后代选择器与一般的兄弟选择器结合起来吗？

Answer 1

div * h2 + div * p:first-of-type

这意味着：

p是其容器中的第一个p和，它是任何元素的后代，而后者又是{{1}的后代}，这是div的兄弟，是（等等）。

在您的HTML中，h2不是div的兄弟。

您的问题是，您首先需要选择h2 div作为h2的父，然后从那里链接其余的选择器。这是不可能的，因为CSS没有父选择器。

Answer 2

当他们不是兄弟姐妹或被hirachy连接时，你不能从另一个childelement中选择一个childelement。

您可以使用此选择器，它会选择您想要的段落，但前提是您的HTML结构与您定义的一样：

div:nth-of-type(2) > div > p:first-child

最好的解决方案是为您提供元素类和ID。最好在CSS中使用尽可能少的规则。规则使页面变慢......

Answer 3

你能编辑html吗？还有一些选择者可以解决这个问题。

<div class="mainContainer"> <!-- new div -->
<div>
  <h2>Header</h2>
</div>
<div>
  <div>
    <p>Here goes my first paragraph. This is what I need to select.</p>
    <p>Here goes my second paragraph</p>
    <p>Here goes my third paragraph</p>
  </div>
</div>
<div>
  <div>
    <p>Here goes my fourth paragraph and I don't want to select this one.</p>
  </div>
</div>
</div> <!-- new div -->

然后用类似的东西：

.mainContainer div:nth-of-type(2) p:first-child { /* css here */ }

您应该能够通过这种方式设置第一段的样式，方法是定位第二个“sub”div中的第一个段落。

是否可以组合更多的CSS组合器？

3 个答案: