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

Question

我要求在使用ffg方案的情况下在UI中显示数据：

1. 如果我选择大写，请按行交替显示颜色

1. 如果我选择“国家/地区”和“大写”，则每两行显示另一种颜色。

如何使用CSS和angular操作它？

Answer 1

请检查一下。它是您正在寻找的确切解决方案。

.table1 tr:nth-child(2n){
  background: red
}

.table2 tr:nth-child(4n), .table2 tr:nth-child(4n-1){
  background: green;
  color: white;
}

<table class="table1">
  <tr><td>one</td></tr>
  <tr><td>two</td></tr>
  <tr><td>three</td></tr>
  <tr><td>four</td></tr>
  <tr><td>five</td></tr>
  <tr><td>six</td></tr>
  <tr><td>seven</td></tr>
  <tr><td>eight</td></tr>
</table>

<table class="table2">
  <tr><td>one</td></tr>
  <tr><td>two</td></tr>
  <tr><td>three</td></tr>
  <tr><td>four</td></tr>
  <tr><td>five</td></tr>
  <tr><td>six</td></tr>
  <tr><td>seven</td></tr>
  <tr><td>eight</td></tr>
</table>

Answer 2

您可以通过更改1st（而不是2和3rd）的颜色来实现。

p {
  background: red;
}
p:nth-child(3n+1) {
  background: white;
}

<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>

<p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>

Answer 3

使用CSS的nth-child替代2行的颜色。

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

https://stackblitz.com/edit/angular-fuvkhw?file=src%2Fapp%2Fapp.component.html

Answer 4

在Angular中，在* ng中您可以获取偶数，奇数或索引变量，请参见the docs

SELECT  sum (Amount_New) Amount_New, 
        sum(Import_Dropout) Import_Dropout, 
        sum(Import)Import, 
        sum(Processing)Processing, 
        sum(Processing_Dropout)Processing_Dropout, 
        sum(Matching)Matching, 
        sum(Matching_Dropout)Matching_Dropout, 
        sum(Export)Export,
        sum(Exported)Exported, 
        sum(Rejected)Rejected, 
        sum(AmountSubTotal)AmountSubTotal, 
        sum(AmountTotal)AmountTotal
FROM (

SELECT  COUNT(CASE WHEN ProcessStatus='_New' THEN 1 ELSE null END) AS Amount_New,
        COUNT(CASE WHEN ProcessStatus='Import_Dropout' THEN 1 ELSE null END) AS Import_Dropout,
        COUNT(CASE WHEN ProcessStatus='Import' THEN 1 ELSE null END) AS Import,
        COUNT(CASE WHEN ProcessStatus='Processing' THEN 1 ELSE null END) AS Processing,
        COUNT(*) AS AmountTotal,
        0 as Processing_Dropout, 
        0 as Matching, 
        0 as Matching_Dropout, 
        0 as Export, 
        0 as Export_Dropout, 
        0 as Exported, 
        0 as Rejected, 
        0 as AmountSubTotal, 
        0 as UnionOrder
FROM "fileimport$marketscanimportcsv" 
WHERE  ft_boekdat like '%2018%'

UNION 

SELECT  0 AS Amount_New, 
        0 AS Import_Dropout, 
        0 AS Import, 
        COUNT(CASE WHEN ProcessStatus='Processing_Dropout' THEN 1 ELSE null END) AS Processing_Dropout,
        COUNT(CASE WHEN ProcessStatus='Processing' THEN 1 ELSE null END) AS Processing,
        COUNT(CASE WHEN ProcessStatus='Matching' THEN 1 ELSE null END) AS Matching,
        COUNT(CASE WHEN ProcessStatus='Matching_Dropout' THEN 1 ELSE null END) AS Matching_Dropout,
        COUNT(CASE WHEN ProcessStatus='Export' THEN 1 ELSE null END) AS Export,
        COUNT(CASE WHEN ProcessStatus='Export_Dropout' THEN 1 ELSE null END) AS Export_Dropout,
        COUNT(CASE WHEN ProcessStatus='Exported' THEN 1 ELSE null END) AS Exported,
        COUNT(CASE WHEN ProcessStatus='Rejected' THEN 1 ELSE null END) AS Rejected,
        COUNT(CASE WHEN ProcessStatus!= '_New' and ProcessStatus!= 'Import_Dropout' and ProcessStatus!= 'Import'  THEN 1 ELSE null END) AS AmountSubTotal,
        COUNT(*) AS AmountTotal,
        1 as UnionOrder
FROM "matching$marketscanmovement" 
WHERE date_part ('year', BookingDate_BA_MS)= 2018 

)  SK GROUP by unionorder order by unionorder asc