gpt4 book ai didi

html - 第 n 个 child 未被识别

转载 作者:搜寻专家 更新时间:2023-10-31 22:57:14 24 4
gpt4 key购买 nike

代码

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

无法识别,我不知道为什么。我用 Firebug 看了一下,连第二个 child 都没有列出来。我只是想将背景设置为您在上面看到的链接中提供的图像。

这里是完整的源代码。

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>

最佳答案

您选择了错误的类(class)。 :nth-child(2) 不会被选择用于 .inner-image 因为它始终是唯一的 child 。您应该选择 .image-container:nth-child 指的是它自己而不是它的 child 。

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

关于html - 第 n 个 child 未被识别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39565368/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com