标题后的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 并不像“do在它到达不同的元素之前”。

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