html - 如何定位其父级中任何类型的第一个标题

标签 html css css-selectors

我正在尝试清理我的 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/

相关文章:

html - 单击它们时图像正在缩小

javascript - 精确类名的CSS选择器

javascript - 跟踪按钮被点击的次数

JavaScript 异步 readAsDataURL 多个文件

html - 如何更改我的 wordpress 网站上图像和文本的对齐方式?

javascript - 在 IE8 中转换对象(仅旋转),类似于使用 CSS3 transform(rotate), transform-origin

CSS:如果选择则没有悬停

html - 申请第 n 个 child 不起作用

javascript - 无法在javascript中比较两个字符串

html - Bootstrap 列偏移