css - 如何将奇偶行 css 应用于动态加载的组件？

问题描述

我正在研究解决方案。

我已经在特定类的元素上使用 :Even,:odd 选择器应用了偶数/奇数行 css

我有两个表，第一个表最初加载了带有展开按钮的数据，单击该按钮我在该特定行之后加载动态表

我在第一张桌子上的 CSS 代码工作正常，但不是第二张

这是我从谷歌浏览器网络检查器的检查元素功能中复制的 html

<div class="report-table-container" style="margin-top: 30px;">
<div class="row report-row">
    <div class="col-4" style="padding-left: 5px;">
        <button class="btn btn-sm">-</button>USA
    </div>
    <div class="col-1">8.26M</div>
    <div class="col-1">534.00</div>
    <div class="col-1">2.83K</div>
    <div class="col-1">317.81M</div>
    <div class="col-1">8.26M</div>
    <div class="col-1">695.00</div>
</div>
    // second level table 
    <dynamic-component>
        <div class="row report-row">
                <div class="col-4" ng-reflect-ng-style="[object Object]" style="padding-left: 40px;">iOS</div>
                <div class="col-1">5.15M</div>
                <div class="col-1">392.00</div>
                <div class="col-1">2.15K</div>
                <div class="col-1">183.98M</div>
                <div class="col-1">5.15M</div>
                <div class="col-1">490.00</div>
        </div>
        <div class="row report-row">
                <div class="col-4" ng-reflect-ng-style="[object Object]" style="padding-left: 40px;">Android</div>
                <div class="col-1">3.11M</div>
                <div class="col-1">142.00</div>
                <div class="col-1">683.35</div>
                <div class="col-1">133.82M</div>
                <div class="col-1">3.11M</div>
                <div class="col-1">205.00</div>
        </div>
    </dynamic-component>

用于在包含“.report-row”类的所有行上应用奇数/偶数样式的 CSS 代码

div.report-row:nth-child(odd) {
    background-color: #F5F5F5;
}
div.report-row:nth-child(even) {
  background-color: #ffffff;
}

如果我删除它的工作正常，则由于动态组件标签而出现问题。

这是屏幕截图

请帮忙

标签： cssangularangular-components

css - 如何将奇偶行 css 应用于动态加载的组件？

问题描述

解决方案

推荐阅读