这是H1标头

Question

为什么我的代码无法按预期工作？第一篇文章的背景颜色必须是绿色。没有课程或身份证我怎么能这样做？附：对不起，我的帖子需要更多文字。对不起，我的帖子需要更多文字。

    <!DOCTYPE html>
<html>
    <head>  
        <meta charset="utf-8">
        <title>stack</title>

        <link rel="stylesheet" href="css/style_new.css">
    </head>

    <body> 
        <section>
            <h1>This is H1 header</h1>

            <article>
                <p>
                    Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                    Lorem ipsum dolor sit amet Lorem ipsum dolor sit 

                </p>
            </article>

            <article>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 

                </p>
            </article>

            <article>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 

                </p>
            </article>
        </section>
    </body> 
</html>

CSS代码：

     section article:first-child {
    background-color: green;
}

    section article:last-child {
        background-color: red;
    }

Answer 1

实际上，分段标签的第一个孩子是 h1 而不是文章。所以请改用下面的代码，

section article:first-of-type {
  background-color: green;
}

Answer 2

文章不是该部分的第一个孩子 - 它的h1

第一个/最后一个子选择器仅在文章是其容器的第一个或最后一个子项时才会定位。

可能的css：

section article{
  background-color:green;
}
section article + article{
  background-color:transparent;
}
section article:last-child {
  background-color: red;
}

请参阅http://jsfiddle.net/rn4wgho2/

Answer 3

 ![enter image description here][1]

h1需要从

部分删除插件

这是H1标头

        <article>
            <p>
                Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
                Lorem ipsum dolor sit amet Lorem ipsum dolor sit 

            </p>
        </article>

        <article>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 

            </p>
        </article>

        <article>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 

            </p>
        </article>
    </section>

CSS：first-child伪元素

3 个答案:

这是H1标头