html - 标题后的 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;
}

score 4 · Accepted Answer

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

一般的兄弟组合选择器与相邻的兄弟组合选择器非常相似，不同之处在于被选择的元素不需要立即在第一个元素之后，而是可以出现在它之后的任何位置。

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

据我所知，没有选择器或选择器组合能够执行您想要执行的操作，因为元素都处于同一级别，并且 CSS 没有“做”那么先进这在它遇到不同的元素之前”。

对不起 - 如果我错了，我希望我是为了你。

score 1 · Accepted Answer

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

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

2 回答 2