在复杂的HTML结构中选择带有CSS的元素

Question

首先， 这是我的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>

我想选择第二个.plan元素。 这是我试过的CSS

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

但它没有奏效。它改变了所有3个.plan元素的背景。

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

Answer 1

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

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

正如您所看到的，.plan不是小组中的小组

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

Hode有帮助

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

.plans .row > div:nth-child(2) .plan {
 background: red
 }

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