html – 标题后的CSS目标最后一段

前端之家收集整理的这篇文章主要介绍了html – 标题后的CSS目标最后一段前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在寻找如何编辑使用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;
}

解决方法

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

The general sibling combinator selector is very similar to the
adjacent sibling combinator selector The difference is that that the
element being selected doesn’t need immediately succeed the first
element,but can appear anywhere after it.

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

据我所知,没有选择器或选择器的组合能够做你想做的事情,因为元素都在同一级别上,而CSS没有像“do”那样先进在它遇到不同的元素之前“.

对不起 – 如果我错了,我希望我是为了你.

猜你在找的HTML相关文章