Html 如何在第n个子选择器上匹配类选择器

我有一个标准的table元素，其中的行是由Angular动态生成的。页面如下所示：

<table class="myDataGrid">
    <thead>
        <tr>
            <th>In Service</th>
            ....
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in data" ng-class="{'offline': item.InService}">
            <td>{{item.InService}}</td>
            ...
        </tr>
    </tbody>
</table>

一切都很好，排在灰色和黑色之间。但是，在添加“offline”类时，将忽略该类：

.offline
{
    background-color: darkred;
}

它显示在inspector树中，但被第一个类/选择器覆盖

所以我增加了一些特殊性：

.myDataGrid .offline
{
    background-color: darkred;
}

这对黑色行（选择器

.myDataGrid tbody tr

）非常有效，但对灰色行根本不起作用，它仍然被取代

因此，我可以编写什么选择器使其适用于灰色行？我试过：

.myDataGrid .offline tbody tr:nth-child(2n + 1)

及

---

无济于事。实际上，它似乎与这两个类都不匹配（它没有出现在检查器列表中）。

您需要去掉

tr:nth child

和

.offline

之间的空格，因为offline类应用于tr，而不是它的一个子类

.myDataGrid tbody tr:nth-child(2n + 1).offline

或

---

离线：第n个孩子（2n+1）完美！他们都工作。因此，我可以了解，删除空格到底做了什么？@BradleyDotNET-

tr:nth child（2n+1）。脱机

以该类

为目标。脱机

，而

tr:nth child（2n+1）。脱机

（带空格）以该类在tr（或其子类之一）内的元素为目标。@misterManSam，这是有意义的。谢谢你澄清这一点@BradleyDotNET-不用担心，这个CSS可以派上用场！

.myDataGrid tbody tr:nth-child(2n + 1) .offline

.myDataGrid tbody tr:nth-child(2n + 1).offline

.myDataGrid tbody tr.offline:nth-child(2n + 1)