1

我正在尝试清理我的 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 应用于它们，我就可以正常工作。如果有更好的方法，我仍然感兴趣吗？

4

3 回答 3

0

如果标题元素始终是其父元素的第一个子元素，那么最简单的选择是：

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;
}
于 2013-01-28T13:02:17.830 回答
0

根据CSS2 选择器（您的问题中不涉及CSS3 选择器+......并且您最好为这两个链接添加书签:)，是相邻的兄弟选择器（CSS3 中的相邻兄弟组合器），只有在绝对相邻的情况下才会匹配元素（一个接一个，中间什么都没有）。

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

于 2013-01-28T12:48:11.933 回答
0

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

div > h1 {
    margin-top: 0;
}

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

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

我希望这有帮助！

于 2013-01-28T12:41:49.963 回答