我正在尝试清理我的 CMS 的富文本编辑器的输出,我想很好地分隔内容。我正在为副本中的所有标题添加边距顶部,但我想将其从第一个标题中删除。
尽管如果第一个内容是“p”而不是标题,那将不起作用。我过去在“+”选择器方面取得了一些成功,但似乎无法实现。
<div class="body_copy">
<h5>My Heading here</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<p>
<img src="images/image1.jpg" alt="">
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<h5>Another heading here</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
非常感谢您的任何想法!
编辑:我认为,如果我针对每个 p + h2、p + h3 并对它们应用 margin-top,我认为它可以工作。如果有更好的方法,我仍然感兴趣吗?
最佳答案
您正在寻找 ~
选择器。与 + 选择器相比,它没有那么严格。
div > h1 {
margin-top: 0;
}
div > h1 ~ h1 {
margin-top: 20px;
}
在上面的示例中,除了第一个 div 中的第一个之外,div 中的所有标题都将在 20px 的顶部留出边距。
希望对您有所帮助!
关于html - 如何定位其父级中任何类型的第一个标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14562065/