仅更改第一三行数据表的颜色答案

【问题标题】：Changes color of 1st three rows only Data Tables仅更改第一三行数据表的颜色
【发布时间】：2017-04-08 10:32:37
【问题描述】：

我正在使用数据表来播种数据，我想为前 3 行设置不同的颜色，第一行应该是 green 第二行是 blue，第三行颜色应该是红色

我的表结构如下

<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>

我试图为第一行赋予样式

.color td {
    background-color : green;
}

但不工作请帮忙解决

谢谢

【问题讨论】：

.color 用于完整的餐桌仪式？你现在得到了什么？
使用 css 子选择器？
不是现在如何使用@ayan
@GowthamShiva 没有效果
@recovery men，类似于tr:nth-child(1)

标签： css datatable

【解决方案1】：

所有现代浏览器都支持 CSS nth-child 选择器。背景颜色可以这样应用于整行：

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

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

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

如果你绝望了，你可以申请课程，但这不是最好的解决方案。类只能用于区分不遵循模式的元素。

【讨论】：

感谢亲爱的它对我的工作还有一件事请我想停止第 1 行、第 2 行和第 3 行的悬停属性.. 我怎样才能实现
hover 属性是如何到达那里的？是使用 CSS 或 jQuery。这会影响答案。
它已经存在于数据表 jquery 文件中，我只想禁用前 3 行
查看数据表正在应用什么 css，并在悬停选择器下的 css 文件中使用相反的内容。
注意：在分页表格上，这将为每个页面的第一行着色。我不确定这是 OP 真正想要的。

【解决方案2】：

您可以使用nth-child 选择器来实现您想要做的事情。你也可以在这里了解它https://css-tricks.com/almanac/selectors/n/nth-child/

试试这样的：

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
 */
}

【讨论】：