Question

我的所有div类别均为.publication，宽度为33％，因此每行有三个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

每行的第一和第三位需要两个选择器：

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>

Answer 2

您可以使用not()并且只有一个选择器。第一个和第三个元素不是第二个元素

.publication:not(:nth-child(3n+2)) {
  background: blue;
}

.publication {
  width: 33.33333%;
  float: left;
}

<div class="container">
  <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>
</div>

Answer 3

您需要一个规则来选择每一行中的第一个元素，并且需要一个规则来选择每一行中的最后一项。

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

<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>

Answer 4

我还发现没有：nth-child（）

的另一种可能性

 .container { 
     display: flex; 
     flex-wrap: wrap; 
     justify-content: space-between; 
  }

 .publication { 
     max-width: 33%; 
     width: 100%; 
 }

 <div class="container">
     <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>

如何选择第一个和第三个带有nth-child的元素？

4 个答案: