css - Css选择“标题”之后的第一个元素

Question

我想选择标题元素之后的第一个给定元素，如何使用 CSS 执行此操作？

<header>
...
</header>

<div>Content</div>

标题后的 div 也可以是 img 或类似的东西..

Answer 1

要选择紧随其后的任何header元素作为兄弟，您可以使用：

header + * {
  margin-left: 10px;
}

Answer 2

就用这样的东西

header + div{

}

header + img{

}

header + section{

}

或者

header + div,header + section,header + img{

    }

Answer 3

如果您的第一个元素始终是 a <div>，您可以使用 Id 或 Class 选择器。

</header>
<div id="first">...</div>

CSS：

#first {
    /* formatting */
}

更多关于id和class

如果下一个元素并不总是<div>你可以使用相邻的选择器。相邻选择器是基于以给定顺序出现的两个标签匹配的选择器。你的第一个标签永远是<header>，第二个是未知的。

header + * {
    /* formatting */
}

这是一个总结CSS 选择器的优秀表格。