Question

我有一个在线文档，其中有两列正文（p标签中的每个段落），顶级<h1> / <h2>标题和多个内联<h3>＆＃ 39; S。

我用来设置列样式的CSS与我的问题无关，但基本的HTML如下：

<h1>Page</h1>
<h2>Article Title</h2>

<div.container><!--Begin container-->

  <div.col1>
    <h3>article heading level 2</h3>
    <p>Paragraph...</p>
    <h3>article heading level 2</h3>
  </div>

  <div.col2>
    <p>Paragraph...</p>
    <h3>article heading level 2</h3>
    <p>Paragraph...</p>
  </div>

...and so on

</div><!--End container-->

我想设置我的<h3>标记，以便顶部的标记（即每列的第一个<h3>）与容器的顶部齐平，但是所有其他{{1} 1}}标签有一个上边距。

最终目标是找到一个优雅的CSS处理方式，这将使我的<h3>更大的垂直空间（margin-top）比我的段落更多，而我不得不去通过并为每个<h3>添加自定义选择器。

我希望有一些方法可以使用伪类来达到这种效果。

Answer 1

您可以使用:not(:first-child)来实现此目标：

div.container > div > h3:not(:first-child) {
   margin-top:30px;
}

这会将样式应用于所有不是第一个孩子的<h3>个元素。

jsFiddle here.

请注意，IE8及之前不支持:not()。

如果您正在使用jQuery库并希望此选择器（支持各种其他伪选择器）在IE8之前和之前工作，您可以查看Selectivzr。

给标题margin-top除非它们与容器div齐平？

1 个答案: