如何使用CSS按行和2行交替

我需要在ffg场景的UI中显示数据：

如果我选择大写，则按行替换颜色，请参见下图

若我选择国家和首都，则每两行交替使用颜色，见下图

---

我如何使用css和angular来处理这个问题？

您可以通过更改1st而不是2和3rd的颜色来实现这一点

p{
背景：红色；
}
第n个孩子（3n+1）{
背景：白色；
}

第一段

第二段

第三段

第四段

第五段

第六段

第七段

第八段

第九段

注意：Internet Explorer 8和早期版本不支持：nth-child（）选择器。

将CSS的第n个子项用于两行的备用颜色

tr:nth-child(4n), tr:nth-child(4n-1) {
    background: red;
}
tr:nth-child(4n-2), tr:nth-child(4n-3) {
    background: blue;
}

---

请检查一下。这正是您所寻求的解决方案

。表1 tr:n第n个子项（2n）{
背景：红色
}
表2 tr:N个孩子（4n），表2 tr:N个孩子（4n-1）{
背景：绿色；
颜色：白色；
}

一
二
三
四
五
六
七
八
一
二
三
四
五
六
七
八

在角度中，在a*ng中，您可以获得变量，偶数或奇数，或索引，请参阅

{{item.country}
{{item.capital}
...
//其中定义了一个变量
大写：布尔=假；

使用css sudo class“奇”和“偶”@SumitPatel，那么两行的可选颜色如何？在这种情况下，您必须为每个2行和3行添加一个类尝试此“@SumitPatel，您能给我发送一个示例实现吗？我有两个选项来突出显示行，第一个（图像示例）如果我选择大写，列表将仅交替突出显示行。第二个列表（图像示例）如果我选择Country和Capital，它将每隔2行交替高亮显示。由于它们是相同的列表，但要高亮显示的行数不同，我如何动态设置它们？。对不起，我是css和angular的新手。ThanksI有两个选项来突出显示行，如果我选择大写，第一个（图像示例）列表将仅交替突出显示行。第二个列表（图像示例）如果我选择Country和Capital，它将每隔2行交替高亮显示。由于它们是相同的列表，但高亮显示的行数不同（取决于所选选项），我如何动态设置它们？。对不起，我是css和angular的新手。谢谢当没有选择任何内容时，您必须使用css sudo类“奇数”和“偶数”，一旦您选择了大写字母，您必须将类添加到父div并使用我粘贴的演示，所有行的颜色都将为红色，并将第一行的颜色更改为白色。通过这种方式，您将能够获得所需的输出。几乎在那里，但是对于table2类，高光在错误的行中。它应该是3,4，然后是7,8。你可以接受这个答案，而不是发布一个新的答案@ladycoder

<tr *ngFor="let item of items;let i=index;let even=even"
   [style.backgroundcolor]="capital?'even?'red':'white':(i%4)<2'red':'white'">
     <td (click)="capital=false">{{item.country}}</td>
     <td (click)="capital=true">{{item.capital}}</td>
     ...
</tr>

//where you has defined a variable
 capital:boolean=false;