Html 未识别第n个孩子_Html_Css

Html 未识别第n个孩子

html css

Html 未识别第n个孩子,html,css,Html,Css,代码 .inner-image:nth-child(2) { background: url('https://avatars3.githubusercontent.com/u/1024025?v=3&s=400'); } 不被承认，我也不知道为什么。我带着Firebug看了一眼，第二个孩子甚至没有被列出来。我只想将背景设置为您在上面看到的链接中提供的图像这是完整的源代码 CSS .inner { background-color: #000; height: 1

代码

.inner-image:nth-child(2) {
  background: url('https://avatars3.githubusercontent.com/u/1024025?v=3&s=400');
}

不被承认，我也不知道为什么。我带着Firebug看了一眼，第二个孩子甚至没有被列出来。我只想将背景设置为您在上面看到的链接中提供的图像

这是完整的源代码

CSS

.inner {
    background-color: #000;
    height: 100%;
    padding: 35px;
    text-align: justify;
    width: 100%;
    color: #fff;
}
.inner-video,
.inner-image {
    padding: 0px;
}
.inner-image {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.inner-image:nth-child(2) {
    background: url('https://avatars3.githubusercontent.com/u/1024025?v=3&s=400');
}
.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}
.row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

HTML

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
    </head>
    <body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4">
                    <div class="inner">
                        This is a Test!
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="inner inner-image">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="inner inner-image">
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="inner inner-video">
                        <iframe src="https://www.youtube.com/embed/c80yIJQJO8s" frameborder="0" allowfullscreen style="width: 100%; height: 100%; min-height: 360px;"></iframe>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="inner">
                        This is a Test!
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>


这是一个考验！
这是一个考验！

它不工作的原因是没有.inner image的兄弟；它包含在自己的部门中。解决方案可以是：

 <div class="image-container col-md-4">
        <div class="inner inner-image">
        </div>
 </div>

 <div class="image-container col-md-4">
       <div class="inner inner-image">
       </div>
 </div>

你选错了班级<代码>：不会为

.内部图像选择第n个子项（2）

，因为它始终是唯一的子项。您应该选择

.image容器

<代码>：第n个子项指的是它自己，而不是它的子项

.image-container:nth-child(2) .inner-image {
    /* styles here */
}

.image-container:nth-child(2) .inner-image {
    /* styles here */
}