Question

我有一个正在生成的动态列表，可能是也可能不是很多行，所以我们这样说：

<div class="timeline-block">
    <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
    <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
    <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
    <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
    <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
    <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
    <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
    <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
    <div class="timeline-dot">TEST</div>
</div>

我需要无限期地替换每个第1，第2和第3类型的背景。我总是在努力使用nth-of-type公式，所以我现在所拥有的不起作用。它使前三项正确，但在此之后开始错过计数。这是css / scss ......

.timeline-block:nth-of-type(1n) {
    .timeline-dot {
        background: blue;
    }
}

.timeline-block:nth-of-type(2n) {
    .timeline-dot {
        background: red;
    }
}

.timeline-block:nth-of-type(3n) {
    .timeline-dot {
        background: green;
    }
}

Answer 1

你所追求的是第n个类型选择器(Xn + Y)

的偏移量

要获得你想要的效果，只需将三个变体中的每一个的偏移值都加一。

.timeline-block:nth-of-type(3n) {
  background: green;
}

.timeline-block:nth-of-type(3n + 1) {
  background: red;
}

.timeline-block:nth-of-type(3n + 2) {
  background: blue;
}

这是codepen

Answer 2

3n+1，3n+2和3n

（在代码片段中，无法像SCSS一样嵌套选择器）：

.timeline-block:nth-of-type(3n+1) .timeline-dot {
  background: blue;
}

.timeline-block:nth-of-type(3n+2) .timeline-dot {
  background: red;
}

.timeline-block:nth-of-type(3n) .timeline-dot {
  background: green;
}

<div class="timeline-block">
  <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
  <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
  <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
  <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
  <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
  <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
  <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
  <div class="timeline-dot">TEST</div>
</div>
<div class="timeline-block">
  <div class="timeline-dot">TEST</div>
</div>

css nth-of-type在长列表中的每一个，第二个，第三个

2 个答案: