Css 仅更改前三行数据表的颜色

我正在使用datatables来播种数据，我想为前三行制作不同的颜色，第一行应该是绿色第二行蓝色，第三行应该是红色

我的桌子结构如下

<script>
  $(document).ready(function() {
        $(document).ready(function() {
        $('#project').DataTable({
        "columnDefs": [
        { "orderable": false, "targets": [0,6,7] }
        ]
        });
        });
    });
</script>

<table class="table table-striped table-bordered table-hover table-checkable order-column dataTable no-footer" id="project" class="color">
    <thead>
        <tr role="row">
            <th style="display:none"></th>
            <th>Sr</th>
            <th>Reg #</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
    @foreach($results as $index => $result)
    <tr>
        <td style="display:none"></td>
        <td>{{ $index+1 }}</td>
        <td class="sorting_1"> {{ $result->reg_no }} </td>
        <td>{{ $result->first_name }}</td>
    </tr>
    @endforeach
    </tbody>
</table>

但不工作，请帮助解决它

---

谢谢

所有现代浏览器都支持CSS

n子项

选择器。背景色可应用于整行，如下所示：

tbody>tr:nth-child(1) { /* etc */
    background-color: green;
}

并非所有属性都可以应用于行。有时，您需要将它们应用于内部单元：

tbody>tr:nth-child(1) td {  /* or th */
    background-color: green;
}

---

如果您不顾一切，可以应用类，但这不是最好的解决方案。类只应用于区分不遵循模式的元素。

您可以使用第n个子项选择器来实现您要执行的操作。你也可以在这里了解它

试着这样做：

tr:nth-child(1) {
 background-color: green;
}
tr:nth-child(2) {
 background-color: blue;
}
tr:nth-child(3) {
 background-color: red;
}
tr:nth-child(1):hover, tr:nth-child(2):hover, tr:nth-child(3):hover {
 /*
 Give whatever effect you want
 */
}

---

.颜色是用于整个餐桌礼仪的吗？你现在得到了什么？使用css子选择器？不是现在如何使用@ayan@GowthamShiva得不到effect@recovery男人们，类似于

tr:nth child（1）

谢谢亲爱的它对我有用还有一件事，请我想停止第1、2和3行的悬停属性。。我如何才能实现

hover

属性是如何到达那里的？Was正在使用CSS或jQuery。这将影响答案。它已经存在于数据表jquery文件中，我只想对前3行禁用它查看数据表正在应用的css，并在悬停选择器下的css文件中使用相反的内容。注意：在分页表上，这将为每页的第一行着色。我不确定这是OP真正想要的。

tr:nth-child(1) {
 background-color: green;
}
tr:nth-child(2) {
 background-color: blue;
}
tr:nth-child(3) {
 background-color: red;
}
tr:nth-child(1):hover, tr:nth-child(2):hover, tr:nth-child(3):hover {
 /*
 Give whatever effect you want
 */
}