css - 如何用第 n 个 child 选择第一个和第三个元素？

Question

我有类 .publication 和宽度为 33% 的 div，所以每行有三个 div:

<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>

我想定位每个“行”的每个第一个和第三个元素。

我认为这可以解决问题，但它不起作用。

.publication:nth-child(3n+1) {

}

Answer 1

每行的第一行和第三行需要 2 个选择器:

body {
  display: flex;
  flex-wrap: wrap;
}

body :nth-child(3n+1), /* every first in row */
body :nth-child(3n) {  /* every third in row */
  background: blue;
}

.publication {
  width: 33.33333%;
}

<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>
<div class="publication">lorem ipsum</div>