标题后的CSS目标最后一段

2018-06-22 19:28:05

我一直在寻找如何在使用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;
}

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

通用兄弟组合选择器与相邻兄弟组合选择器非常相似，区别在于被选中的元素不需要立即成功第一个元素，但可以出现在其后的任何位置。

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

据我所知，没有选择器或选择器组合能够做你正在尝试做的事情，因为这些元素都在同一层次上，而CSS并没有像“do这在它遇到不同的元素之前“。

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

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

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

链接地址: http://www.djcxy.com/p/63993.html