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-of-type< 匹配父元素(在兼容的浏览器中)的 first h1，我建议:

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 */
}