Question

我需要将div的背景颜色更改为奇数或偶数，强制将最后一个div更改为灰色，将最后一个div强制更改为绿色，与跟随所有div一样。

NumberOfAccidents   NAs   first_bin   sec_bin     third_bin
1                   0     0           0           1
3                   0     1           0           0
0                   1     0           0           0
0                   1     0           0           0
6                   0     0           1           0
2                   0     1           0           0

.main{
width:500px;
height: 500px;
border:1px solid blue;
}
.box{
width:300px;
height: 100px;
border:1px solid red;
}

.box:nth-child(odd) {
  background: grey;
}

.box:nth-child(even) {
  background:green;
}

我尝试更改CSS中的奇/偶类，这不符合我的期望。最后一个div是强制灰色，最后一个是绿色。请任何一位向导，谢谢。

Answer 1

您可以使用nth-last-child来解决所需的内容，请参阅下面的我的编辑来解决您的问题。有关nth-last-child的更多信息，请点击此处：https://www.w3schools.com/cssref/sel_nth-last-child.asp

谢谢

.main{
width:500px;
height: 500px;
border:1px solid blue;
}
.box{
width:300px;
height: 100px;
border:1px solid red;
}

.box:nth-child(odd) {
  background: grey;
}

.box:nth-child(even) {
  background:green;
}

.box:nth-child(odd) {
  background: grey;
}

.box:nth-last-child(2) {
  background:green;
}

.box:nth-last-child(1) {
  background:grey;
}

<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>


</div>

Answer 2

如果您想从最后一行开始做某事，请使用:nth-last-child()。

.main{
width:500px;
height: 500px;
border:1px solid blue;
}
.box{
width:300px;
height: 100px;
border:1px solid red;
}

.box:nth-last-child(odd) {
  background: grey;
}

.box:nth-last-child(even) {
  background:green;
}

<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>


</div>

Answer 3

您可以使用nth-last-child选择div。试试我的代码-

.main {
  width: 500px;
  height: 500px;
  border: 1px solid blue;
}

.box {
  width: 500pxpx;
  height: 50px;
  border: 1px solid red;
}

.box:nth-last-child(2n+1) {
  background: grey;
}

.box:nth-last-child(2n) {
  background: green;
}

<div class="main">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

Answer 4

.main{
width:500px;
height: 500px;
border:1px solid blue;
}
.box{
width:300px;
height: 100px;
border:1px solid red;
}

.box:nth-child(odd) {
  background: grey;
}

.box:nth-child(even) {
  background:green;
}

.box:last-child {
  background: grey;
}
.box:nth-last-child(2){
  background:green;
}

<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>


</div>

如何以降序更改奇数/偶数div中的背景颜色

4 个答案: