css - CSS选择器：父母的第一个孩子

Question

我想选择匹配特定类型的父元素的第一个元素；的 css 等价物$(parent).children()[0]。例如，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

我建议，如果您想匹配第 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 */
}