如何在 CSS 中将图像不透明度与 nth-child 或 nth-of-type 结合使用？ [复制]

Question

I posted this question yesterday and was referred to some other answers.

这些答案帮助我以我想要的不透明度显示图像，这很好，但问题是我想要显示的下一个图像没有被选择（我想要一次鼓，而不是第二次的电吉他行）：

.concert .details .bg-image:nth-of-type(8n+1) {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(drums.png) 66% 33%;
  opacity: 0.2;
  width: 33%;
  height: 100%;
}

.concert .details .bg-image:nth-of-type(8n+2) {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(electricguitar.png) 66% 33;
  opacity: 0.2;
  width: 33%;
  height: 100%;
}

<div class="concerts">
  {% for concert in concerts %}
  <div class="concert">
    <div class="date">
      <span class="day">{{ concert.date.day }}</span>
      <span class="month">{{ concert.date|date:'F' }}</span>
      <span class="year">{{ concert.date.year }}</span>
    </div>
    <div class="details">
      <div class="bg-image"></div>
      <span class="headliner">{{ concert.headliner }}</span>
      <span class="support">{{ concert.support }}</span>
      <span class="price">{{ concert.price }}</span>
      <span class="notes"> {{ concert.notes }}</span>
      <span class="concert_website">
                <a href="{{ concert.website }}" target="_blank">
                  Event Website &#9835;
                </a>
              </span>
    </div>
    <div class="venue">
      <span class="venue_name">
                <a href="{% url 'concerts:venue_events' slug=concert.venue.slug %}">
                  {{ concert.venue.name }}
                </a>
              </span>
      <span class="address">{{ concert.venue.address }}</span>
      <span class="venue_website">
                <a href="{{ concert.venue.website }}" target="_blank">
                  Venue Website &#9833;
                </a>
              </span>
    </div>
  </div>
  {% endfor %}
</div>

为什么第二行没有显示电吉他图像？我确定这与我的第 n 个类型选择器有关，并且我已经尝试了我能想到的第 n 个类型和第 n 个子项的所有排列，但很明显，我不理解某些东西。我做错了什么？

Answer 1

你需要把第n个类型放在concert上（bg-image总是details div的第一个孩子）：

/* you can cut down your css by adding all shared styles to one class*/

.concert .details .bg-image {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.2;
  width: 33%;
  height: 100%;
}

/* then you just change your backgrounds */
.concert:nth-of-type(8n+1) .details .bg-image {
  background: url(drums.png) 66% 33%;
}

.concert:nth-of-type(8n+2) .details .bg-image {
  background: url(electricguitar.png) 66% 33%;
}