CSS 选择器 : first child of parent

Question

我想选择匹配特定类型的父元素的第一个元素；相当于 $(parent).children()[0] 的 css。例如，作为父元素的第一个子元素的 h1 标签:

<div>
  <h1 id="foo"></h1>     // match
  <div></div>            // not match
  …
</div>
<section>
  <h1 id="bar"></h1>    // match
  <div></div>           // not match
  …
</section>
<div>
  <div id="baz"></div> // not match
  <h1 id="qux"></h1>   // not match
  …
</div>

jsfiddle

编辑我知道没有“父”选择器。

Answer 1

我建议，如果你想匹配父元素的 first h1 使用 :first-of-type:

h1:first-of-type {
    /* CSS to style the first h1 of its parent element */
}

但是，如果您只想在 h1 元素是其父元素的第一个子元素时设置样式:

h1:first-child {
    /* CSS to style the h1 only if it's the first-child of its parent element */
}