CSS 选择器：父级的第一个子级

Question

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

\n\n

<div>\n  <h1 id="foo"></h1>     // match\n  <div></div>            // not match\n  \xe2\x80\xa6\n</div>\n<section>\n  <h1 id="bar"></h1>    // match\n  <div></div>           // not match\n  \xe2\x80\xa6\n</section>\n<div>\n  <div id="baz"></div> // not match\n  <h1 id="qux"></h1>   // not match\n  \xe2\x80\xa6\n</div>\n

\n\n

jsfiddle

\n\n

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

\n

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