是>:第一个孩子的工作是否已知或未知类型？

Question

我已经阅读过第一个直接孩子是否有CSS选择器？和http://www.w3schools.com/cssref/css_selectors.asp

我想我必须将效果应用于<h1>标签的第一个孩子,但我无法让它工作.所以相反,我试图使用nth-child,但仍然没有运气.

的jsfiddle

<section>
<article>
    <h1>Test Details</h1>
        <ul>
            <li>Layer This</li>
            <li>Layer That</li>
            <li>Layers</li>
        </ul>
</article>
</section>

<section>
    <article>
        <h1>Campaign details</h1>
        <p>Text</p>
    </article>
</section>

CSS

section {
    padding:30px;
}

section article {
    background:#EBEBEB;
}

section article h1 {
    background:#0C79CB;
    padding:10px;
}

/* This is where I am struggling */
section article h1:nth-child(2):before  {
    background-color:white !important;
    content:'';
    height:10px;
    display:block;
}

如果你打开小提琴,你会注意到标题有蓝色背景,内容有灰色背景.我所要做的就是"插入"一条白线:

当前:

所需(注意蓝色和灰色之间的白色)

请注意,我知道如果我只是添加一个新div类,或者甚至添加一个标签,这是非常简单border-bottom:solid 5px white;的<h1>,重点是我正在尝试学习CSS选择器,所以这可能使用CSS选择器吗？

Answer 1

:first-child 可以在有或没有知道元素类型的情况下使用.

你可以做parent > :first-child任何匹配任何第一个孩子,无论它是什么节点类型,或者你parent > p:first-child只能匹配第一个孩子(如果它是一个p标签).

您也parent > p:first-of-type可以匹配第一个p内部parent,即使它不是第一个孩子.