div第一个标题的CSS选择器

Question

我有以下HTML结构：

<div class="content">
    <img src="#">
    <!-- Text content here -->
</div>

这构成了我制作的网站内容页面的基础，该页面使用CMS来管理内容，能够选择图像，然后为文本内容选择所见即所得编辑器。CMS输出的页面HTML示例如下：

<div class="content">
    <img src="#">
    <h1>Lorem</h1>
    <p>Lorem ipsum dolor</p>
</div>

有没有一个CSS选择器可以选择上面示例HTML中的h1？如果文本内容部分以标题开头，我希望能够删除标题的上边距，但我不能用类来做到这一点（因为文本内容是CMS通过所见即所得编辑器输出的）。

Answer 1

你可以试试这个

.content > img + h1{
 // css style
}

第二个选项

.content > h1:first-child{
// here css
}

第三次

.content h1:first-child{
// here style
}

Answer 2

.content > h1:first-of-type {margin-top:0;}

这应该会成功

Answer 3

如果我理解你的要求，你只需要使用h1。

示例

h1 {
    margin:0;
}

如果你想要第一个h1，你可以使用:first-child

当我开始编码时，我通常会清理浏览器制作的边距和填充。

h1, h2, h3, h4, h5, h6 {
    margin:0;
    padding:0;
}

CSS选择器：http://www.w3schools.com/cssref/css_selectors.asp

Answer 4

尝试：

.content h1:first-child {
    /* CSS */
}

Answer 5

或者您也可以使用

.content h1:first-of-type{
// here style
}