如何按降序更改奇/偶div中的背景颜色答案

【问题标题】：How to change background color in odd/even div in descending order如何按降序更改奇/偶div中的背景颜色
【发布时间】：2019-07-27 22:07:05
【问题描述】：

我需要在div中更改背景颜色奇数或偶数，强制最后一个div为灰色，最后一个div为绿色，与所有div相同。

.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;
}

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


</div>

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

【问题讨论】：

您可以编辑您的 sn-p 以显示您实际尝试的内容吗？即交换even 和odd？因为这当然会产生你正在寻找的东西。除非我们谈论的是未指定数量的.box div？
Select second last element with css的可能重复
CSS - how to colour odd and even divs?的可能重复
试试我的答案@Jegan

标签： javascript html css

【解决方案1】：

如果您想从最后一行开始做某事，请使用: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>

【讨论】：

【解决方案2】：

您可以使用 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>

【讨论】：

我不知道为什么这被否决了，这用一个工作示例正确回答了他的问题！
您的回答与zmag有何不同？
检查我的答案@Justinas

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：