更改第二和第三个div的背景颜色[重复]

Question

这个问题在这里已有答案：

• Why doesn't nth-of-type/nth-child work on nested elements? 1回答

我想用类.offer-info-wrapper更改第二个和第三个div的背景颜色。当然我使用: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>

jsFiddle

Answer 2

这是您想要关注的行类。这是我将如何做到这一点，以便您可以拥有更多.offer-info-wrapper类，而不必手动为每个类应用样式：

.offer-info-wrapper {
    background-color: #41b1b2;
    }
.row:first-child .offer-info-wrapper {
  background-color: inherit;
}
    

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

Answer 3

：nth-​​of-type（）选择器匹配其父元素的特定类型的第n个子元素。

使用：nth-​​child代替行div

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

fiddle

Answer 4

要使用:nth-of-type()选择器修改的元素必须全部来自同一父级。在你的例子中，每个.offer-info-wrapper都有一个.row父级，所以它不起作用。

如上面的答案所述，您需要在.row项目上使用选择器。

这个问题也很有帮助。

Why doesn't nth-of-type/nth-child work on nested elements?