CSS：n-th child 不适用于 background-image

Question

我想使用 CSS 中的 nth-child 属性设置不同的背景图像。但是我在每个 child 元素中得到相同的图像。

#main .container .row .col-md-5 .card .overflow-hidden .gradient {
    background-size: cover;
    height         : 15rem;
    transition     : transform 0.5s;
}

#main .container .row .col-md-5 .card .overflow-hidden .gradient:nth-child(1) {
    background-image: linear-gradient(0deg, rgba(152, 102, 2, 0.8), rgba(90, 102, 2, 0.8)), url(https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=);
}

#main .container .row .col-md-5 .card .overflow-hidden .gradient:nth-child(2) {
    background-image: linear-gradient(0deg, rgba(152, 102, 2, 0.8), rgba(90, 102, 2, 0.8)), url(https://images.unsplash.com/photo-1498404781417-2b02e42ecd0d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGVwaWMlMjBuYXR1cmV8ZW58MHx8MHx8&w=1000&q=80);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<section id="main" class="c">
    <div class="container py-5">
        <div class="row pt-5">
            <div class="col-md-1"></div>
            <div class="col-md-5 d-flex align-items-stretch">
                <div class="card shadow-sm">
                    <div class="overflow-hidden">
                        <div class="gradient"></div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Header 1</h5>
                        <p class="card-text">Content 1
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-5 d-flex align-items-stretch">
                <div class="card shadow-sm">
                    <div class="overflow-hidden">
                        <div class="gradient"></div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Header 1</h5>
                        <p class="card-text">Content 1
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-1"></div>
        </div>
    </div>
</section>

我已经尝试使用各种组合来调用 nth-child，但似乎对我没有任何作用。这是我第一次遇到 nth-child 属性.

Answer 1

您不能在此代码中使用 nth-child for.gradient。nth-child 用于一个父元素中的多个子元素！

Answer 2

#main .container .row .col-md-5 :nth-child(2) .card .overflow-hidden .gradient

#main .container .row .col-md-5 :nth-child(3) .card .overflow-hidden .gradient

#main .container .row .col-md-5 .card .overflow-hidden .gradient {
    background-size: cover;
    height         : 15rem;
    transition     : transform 0.5s;
}

#main .container .row .col-md-5:nth-child(2) .card .overflow-hidden .gradient {
    background-image: linear-gradient(0deg, rgba(152, 102, 2, 0.8), rgba(90, 102, 2, 0.8)), url(https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=);
}

#main .container .row .col-md-5:nth-child(3) .card .overflow-hidden .gradient {
    background-image: linear-gradient(0deg, rgba(152, 102, 2, 0.8), rgba(90, 102, 2, 0.8)), url(https://images.unsplash.com/photo-1498404781417-2b02e42ecd0d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fGVwaWMlMjBuYXR1cmV8ZW58MHx8MHx8&w=1000&q=80);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<section id="main" class="c">
    <div class="container py-5">
        <div class="row pt-5">
            <div class="col-md-1"></div>
            <div class="col-md-5 d-flex align-items-stretch">
                <div class="card shadow-sm">
                    <div class="overflow-hidden">
                        <div class="gradient"></div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Header 1</h5>
                        <p class="card-text">Content 1
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-5 d-flex align-items-stretch">
                <div class="card shadow-sm">
                    <div class="overflow-hidden">
                        <div class="gradient"></div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">Header 1</h5>
                        <p class="card-text">Content 1
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-1"></div>
        </div>
    </div>
</section>

Answer 3

nth-child 仅适用于父容器内的相邻兄弟元素。如果你沿着树往回走，你需要找到两个 .gradient 元素的共同祖先。在这种情况下，它将是 .row，正如您在评论中正确识别的那样，但该元素实际上有四个子元素。

所以要挑选出您想要的两个 div nth-child(2) 和 nth-child(3)。

#main .container .row .col-md-5 .card .overflow-hidden .gradient {
  background-size: cover;
  height: 15rem;
  transition: transform 0.5s;
}

#main .container .row .col-md-5:nth-child(2) .gradient {
  background-image: linear-gradient(0deg, rgba(152, 102, 2, 0.8), rgba(90, 102, 2, 0.8)), url(https://placedog.net/800);
}

#main .container .row .col-md-5:nth-child(3) .gradient {
  background-image: linear-gradient(0deg, rgba(152, 102, 2, 0.8), rgba(90, 102, 2, 0.8)), url(https://placedog.net/600);
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<section id="main" class="c">
  <div class="container py-5">
    <div class="row pt-5">
      <div class="col-md-1"></div>
      <div class="col-md-5 d-flex align-items-stretch">
        <div class="card shadow-sm">
          <div class="overflow-hidden">
            <div class="gradient"></div>
          </div>
          <div class="card-body">
            <h5 class="card-title">Header 1</h5>
            <p class="card-text">Content 1
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-5 d-flex align-items-stretch">
        <div class="card shadow-sm">
          <div class="overflow-hidden">
            <div class="gradient"></div>
          </div>
          <div class="card-body">
            <h5 class="card-title">Header 1</h5>
            <p class="card-text">Content 1
            </p>
          </div>
        </div>
      </div>
      <div class="col-md-1"></div>
    </div>
  </div>
</section>

CSS：n-th child 不适用于 background-image

CSS: n-th child not working for background-image

html

css