Question

我想使用类.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?

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

4 个答案: