标题后的CSS目标最后一段

Question

我一直在寻找如何使用CSS编辑标题后的最后一段。

我认为#div h1 ~ p:last-child可以做到这一点，但它会跳过第二个标题并编辑列表前的最后一个段落。我已经搜索了一段时间并遇到了一些高级CSS帮助站点，但他们正在重复使用最常见的高级选择器。

HTML：

<h1>Heading</h1>
<p>content</p>
<p>content</p>
<p>content</p>

<h2>Heading</h2>
<p>content</p>
<ul>
      <li>list</li>
      <li>list</li>
</ul>

CSS：

#contentContainer > h1 ~ p:last-of-type {
    border-bottom: 1px solid #000;
}

Answer 1

波浪号字符代表一般的兄弟选择器：

  

一般兄弟组合选择器非常类似于   相邻兄弟组合选择器的区别在于   被选中的元素不需要立即成功   元素，但可以出现在它之后的任何地方。

这意味着它可以在100个不同的标签之后（例如h2，h3，div，img等）并且css仍然会影响它。

据我所知，没有选择器或选择器的组合能够做你想做的事情，因为元素都在同一级别上，而且CSS没有达到先进的水平作为“在遇到不同的元素之前做到这一点”。

抱歉 - 如果我错了，我希望我是为了你。

Answer 2

如果您只想在标题和最后一段之间创建空格，可以使用

p + h2, p + h3 { 
    padding-top: 20px 
}