CSS：第一个孩子的伪元素

Question

Why is my code not working as intended? 为什么我的代码无法按预期工作？ background-color of the first article must be green. 第一篇文章的background-color必须为绿色。 How I can do it without classes or id? 没有类或ID的情况下该怎么办？ PS I'm sorry but my post needs more text. PS很抱歉，我的帖子需要更多文字。 I'm sorry but my post needs more text. 抱歉，我的帖子需要更多文字。

    <!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 code: CSS代码：

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

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

Answer 1

Actually first child of section tag is h1 not article. 实际上，区段标记的第一个子代不是h1文章。 So use below code instead, 因此，请改用以下代码，

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

Answer 2

article is not the first-child of section - its h1 文章不是本节的第一个孩子-它的h1

the first/last child selector does only target if article is the first or last child of its container. 仅当article是其容器的第一个或最后一个孩子时，第一个/最后一个孩子选择器才定位。

possible css: 可能的CSS：

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

see http://jsfiddle.net/rn4wgho2/ 参见http://jsfiddle.net/rn4wgho2/

Answer 3

 ![enter image description here][1]

h1 required to remove the plug out of the 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>

CSS：第一个孩子的伪元素

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-03-17 06:58:06

解决方案2
0 2015-03-17 06:59:42

解决方案3
0 2015-03-17 07:05:41

This is H1 header 这是H1标头

CSS：第一个孩子的伪元素

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-03-17 06:58:06

解决方案2 0 2015-03-17 06:59:42

解决方案3 0 2015-03-17 07:05:41

This is H1 header 这是H1标头

解决方案1
1 已采纳 2015-03-17 06:58:06

解决方案2
0 2015-03-17 06:59:42

解决方案3
0 2015-03-17 07:05:41