使用nth-of类按类选择元素

Question

我试图用nth-of-type设置每隔一个灰色的背景.time和.title元素(奇/偶模式).

 <div class="calendar">
     <div class="time">Gray Background</div>
     <div class="title">Gray Background</div>
     <div class="time">White Background</div>
     <div class="title">White Background</div>
     <div class="time">Gray BG</div>
     <div class="title">Gray BG</div>
     <div class="time">White Background </div>
     <div class="title">White Background</div>
 </div>

Answer 1

该nth-of-type()伪类无法识别类.它只关心同一父元素(源)的元素.

而且,在这种情况下,您不需要匹配类nth-of-type.

根据您的HTML结构,您看起来想要2x2斑马条纹.

因此,将每个元素设置为灰色,然后用白色覆盖每个第4和第4个:

div > div {
   background-color: lightgray;
}

div > div:nth-child(4n),
div > div:nth-child(4n-1) {
   background-color: white;
}

<div class="calendar">
  <div class="time">Gray Background</div>
  <div class="title">Gray Background</div>
  <div class="time">White Background</div>
  <div class="title">White Background</div>
  <div class="time">Gray BG</div>
  <div class="title">Gray BG</div>
  <div class="time">White Background</div>
  <div class="title">White Background</div>
  <div class="time">Gray Background</div>
  <div class="title">Gray Background</div>
  <div class="time">White Background</div>
  <div class="title">White Background</div>
  <div class="time">Gray BG</div>
  <div class="title">Gray BG</div>
  <div class="time">White Background</div>
  <div class="title">White Background</div>
</div>