Question

守则

.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>

Answer 1

您选择了错误的课程。 :nth-child(2)不会选择.inner-image，因为它始终是唯一的孩子。您应该选择.image-container。 :nth-child指的是自己，而不是它的孩子。

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

Answer 2

它不起作用的原因是因为没有.inner-image的兄弟;它包含在自己的div中。解决方案可能是：

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

CSS：

.image-container:nth-child(2) .inner-image{...}

n-child不被认可

2 个答案: