Question

我正在尝试清理我的CMS富文本编辑器的输出，我想很好地解决问题。我正在为副本中的所有标题添加一个margin-top，但我想从第一个标题中删除它。

虽然如果第一个内容是'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应用于它们，我认为我有一些工作。如果有更好的方法，我仍然感兴趣吗？

Answer 1

您正在寻找~选择器。与+选择器相比，它不那么严格。

div > h1 {
    margin-top: 0;
}

div > h1 ~ h1 {
    margin-top: 20px;
}

通过上面的例子，除div中的第一个div之外的div中的所有标题都将在20px的顶部有一个边距。

我希望这有帮助！

Answer 2

根据CSS2 Selector（你的问题中没有CSS3 selector ...并且你最好将这两个链接加入书签:)，+是相邻的兄弟选择器（CSS3中的相邻兄弟组合器）），只有绝对相邻时才会匹配元素（一个接一个，中间没有任何东西）。

您可能需要考虑General Sibling Combinator，E ~ F，它将匹配元素E之前（但不是立即）的每个F元素，这将为您提供更大的灵活性，并希望您的结果是试图实现。

Answer 3

如果heading元素始终是其父元素的第一个子元素，则最简单的选项是：

h1, h2, h3 /* ...etc */ {
    margin-top: 1em;
}

h1:first-child, h2:first-child, h3:first-child /* ...etc */ {
    margin-top: 0;
}

要仅将其限制为:first-child内的.body_copy以及.body_copy > h1, .body_copy > h2, .body_copy > h3 /* ...etc */ { margin-top: 1em; } .body_copy > h1:first-child, .body_copy > h2:first-child, .body_copy > h3:first-child /* ...etc */ { margin-top: 0; }元素的直接子项，然后只需修改选择器：

{{1}}

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

3 个答案: