更改第二个和第三个 div 的背景颜色

Question

我想用 class 更改第二个和第三个 div 的背景颜色.offer-info-wrapper。当然，我使用:nth-of-type(2)并:nth-of-type(3)更改它，但它不起作用。问题出在哪儿？

<section class="offer">
    <div class="row">
        <div class="offer-info-wrapper">
            <div class="offer-info">
                <h3>Promotional Email Goals</h3>
                <p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit, sed diam nonummy nibh ut laoreet dolore magna aliquam erat volutpat.</p>
                <p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit, sed diam nonummy nibh euismod tincidunt ut</p>
            </div>
        </div>
        <div class="offer-image">
            <img src="img/entrepreneur.jpg" alt="Entrepreneur">
        </div>
    </div>
    <div class="row">
        <div class="offer-info-wrapper">
            <div class="offer-info">
                <h3>Promotional Email Goals</h3>
                <p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit, sed diam nonummy nibh tincidunt ut laoreet dolore magna volutpat.</p>
                <a href="#" class="button">View more</a>
            </div>
        </div>
        <div class="offer-image">
            <img src="img/home-office.jpg" alt="Home-office">
        </div>
    </div>
    <div class="row">
        <div class="offer-info-wrapper">
            <div class="offer-info">
                <h3>Thinking Ahead</h3>
                <p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit, sed diam nonummy nibh tincidunt ut laoreet dolore magna volutpat.</p>
                <a href="#" class="button">View more</a>
            </div>
        </div>
        <div class="offer-image">
            <img src="img/write.jpg" alt="Write">
        </div>
    </div>
</section>

CSS

.offer-info-wrapper:nth-of-type(2),
.offer-info-wrapper:nth-of-type(3) {
    background-color: #41b1b2;

}

Answer 1

您的查询将不能工作，因为只有一种类型的.offer-info-wrapper每.row。相反，使用:nth-child了的.row项目进入第二和第三.offer-info-wrapper发生。

.row:nth-child(2) .offer-info-wrapper,
.row:nth-child(3) .offer-info-wrapper {
  background-color: #41b1b2;  
}

演示

.row:nth-child(2) .offer-info-wrapper,
.row:nth-child(3) .offer-info-wrapper {
  background-color: #41b1b2;
}

<section class="offer">
  <div class="row">
    <div class="offer-info-wrapper">
      <div class="offer-info">
        <h3>Promotional Email Goals</h3>
        <p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit, sed diam nonummy nibh ut laoreet dolore magna aliquam erat volutpat.</p>
        <p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit, sed diam nonummy nibh euismod tincidunt ut</p>
      </div>
    </div>
    <div class="offer-image">
      <img src="img/entrepreneur.jpg" alt="Entrepreneur">
    </div>
  </div>
  <div class="row">
    <div class="offer-info-wrapper">
      <div class="offer-info">
        <h3>Promotional Email Goals</h3>
        <p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit, sed diam nonummy nibh tincidunt ut laoreet dolore magna volutpat.</p>
        <a href="#" class="button">View more</a>
      </div>
    </div>
    <div class="offer-image">
      <img src="img/home-office.jpg" alt="Home-office">
    </div>
  </div>
  <div class="row">
    <div class="offer-info-wrapper">
      <div class="offer-info">
        <h3>Thinking Ahead</h3>
        <p>Lorem ipsum dolor sit amet, consec tetuer adipi scing elit, sed diam nonummy nibh tincidunt ut laoreet dolore magna volutpat.</p>
        <a href="#" class="button">View more</a>
      </div>
    </div>
    <div class="offer-image">
      <img src="img/write.jpg" alt="Write">
    </div>
  </div>
</section>

js小提琴