Question

我已阅读Is there a CSS selector for the first direct child only?和http://www.w3schools.com/cssref/css_selectors.asp

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

<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;
}

如果您打开小提琴，您会注意到标题背景为蓝色，内容为灰色背景。我试图做的就是插入＆＃39;一条白线：

电流：

enter image description here

所需（注意蓝色和灰色之间的白色）

enter image description here

请注意，我知道如果我只是在课程中添加新的div，或者甚至在border-bottom:solid 5px white;标记中添加<h1>，这一点非常简单，重点是我＆＃ 39;我试图了解CSS选择器，这样可以使用CSS选择器吗？

Answer 1

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

您可以parent > :first-child匹配任何第一个孩子，无论节点类型是什么，或者您可以parent > p:first-child仅匹配第一个孩子（如果它是p标签。< / p>

您也可以parent > p:first-of-type与p内的parent匹配，即使它不是第一个孩子。

Answer 2

要完成您尝试使用伪元素的示例：

可以使用:nth-child(1)选择第一个孩子，例如:first-child。 注意：在此示例中，这是毫无意义的，因为每<h1>只有一个<article>。
section article h1已获得position: relative，其position: absolute个孩子将与其相关。
:after已position: absolute和width: 100%，以便在<h1>背景底部创建一行。

请记住，:after和:before伪元素相当于：

<h1>
    <span>This is the :before</span>
        I am the heading
    <span>This is the :after</span>
</h1>

Have an example

CSS

section article h1 {
    background:#0C79CB;
    padding:10px 10px 20px;
    position: relative;
}
/* 
 -- Select the first h1 child of article and generate a pseudo element.
*/
 section article h1:nth-child(1):after {
    background-color:white;
    content:'';
    height:10px;
    width: 100%;
    display:block;
    position: absolute;
    bottom: 0;
    left: 0;
}

Answer 3

在您的示例中，您尝试选择h1的第二个孩子，但该元素没有任何子女，因此它失败了。您必须选择h1

的父的第二个孩子

section article :nth-child(2):before

这样做的好处是您不会在其中添加任何标记名称，因此即使有一天您将h1更改为h2，也可以使用例。最后一个选择器也可以重写为

section article :first-child:after

它不是相同的事物，但您也可以在元素之后添加生成的内容（在您的情况下，它会很好并且以相同的方式工作）。

或者，如果你想匹配h1的某些东西，你需要使用兄弟选择器来定位它的下一个兄弟

section article h1 + *:before

此选择器将选择在h1之后出现的第一个元素（无论它是什么类型）。

或者，在元素之后插入生成的内容，您可以使用此

section article h1:after {
  background-color: white !important;
  content: '';
  height: 10px;
  display: block;
}

在我看来，这是最简单的事情

是>＆gt; ：第一胎的工作是否已知或未知类型？

3 个答案: