在复杂的HTML结构中使用CSS选择元素

首先,， 这是我的HTML

<section class="plans container-fluid">
      <div class="container">
        <h2><img src="img/money.png" class="img-fluid mr-3" />Open A Ira And Get this tax deductables</h2>
        <div class="row">
          <div class="col-md-4 text-center">
            <div class="plan">
              <h4>Standard</h4>
              <h2>$2000</h2>
              <img src="img/plan1.png" class="img-fluid" />
              <p>The Amount is all Tax Deductable</p>
              <a class="btn btn-green" href="#">Get Started</a>
            </div>
          </div>
          <div class="col-md-4 text-center">
            <div class="plan">
              <h4>Unlimited</h4>
              <h2>$4000</h2>
              <img src="img/plan2.png" class="img-fluid" />
              <p>The Amount is all Tax Deductable</p>
              <a class="btn btn-green" href="#">Get Started</a>
            </div>
          </div>
          <div class="col-md-4 text-center">
            <div class="plan">
              <h4>Platinum</h4>
              <h2>$6500</h2>
              <img src="img/plan3.png" class="img-fluid" />
              <p>The Amount is all Tax Deductable</p>
              <a class="btn btn-green" href="#">Get Started</a>
            </div>
          </div>
        </div>
      </div>
    </section>

但它不起作用。它改变了所有3.计划元素的背景

---

在这种情况下，选择元素的最佳方法是什么？

您需要在每个div之前以div元素为目标。这是因为下一个结构：

Parent
  |-Child 1
  |  |-Child 1
  |-Child 2
  |  |-Child 1
  |-Child 3
  |  |-Child 1

如您所见，

.plan

不是childs中的组

.plans .container .row div:nth-child(2) {
    background: #f00;
}

这有帮助吗

.plans.container.row div:n子级（2）{
背景：#f00；
}

开一个个人退休账户，就可以扣税了
标准
$2000
金额都是可以扣税的

无限的
$4000
金额都是可以扣税的

铂金
$6500
金额都是可以扣税的

试试这个。它会完成你的工作

.plans.row>分区：第n个子项（2）.plan{
背景：红色
}

开一个个人退休账户，就可以扣税了
标准
$2000
金额都是可以扣税的

无限的
$4000
金额都是可以扣税的

铂金
$6500
金额都是可以扣税的

它选择了.col-md-4 div而不是.plan div。它选择了.col-md-4 div而不是.plan div。@MilanUptech您可以放弃投票并接受我的答案来感谢我。如果你想：）当然可以。由于StackOverFlow:D的时间规则，我没有接受

.plans .container .row div:nth-child(2) {
    background: #f00;
}