如何为Grid.js表格的nth-child行设置不同背景色？

我使用Grid.js库创建了一个表格，在样式设置上遇到问题。我想为除一行外的所有表格行修改背景色，使用了代码tr.gridjs-tr:nth-child(even) {background: #47bb60;}但并未生效，请问我的CSS中缺少了什么？

代码示例 #

JavaScript

new gridjs.Grid({
    columns: ["Name", "Email", "Phone Number"],
    data: [
    ["John", "john@example.com", "(353) 01 222 3333"],
    ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
    ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
    ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
    ],
    sort: true,
    Default: true,
    style: {
        table: {
            border: '3px solid #ccc'
        },
        th: {
            'background-color': 'rgba(0, 0, 0, 0.1)',
            'color': '#fff',
            'border-bottom': '3px solid #ccc',
            'text-align': 'center'
        },
        td: {
            'text-align': 'center'
        },
    }
}).render(document.getElementById("wrapper"));

CSS

th {
    box-sizing: border-box;
    background: #1f61cf;
    color: #fff;
}

tr.gridjs-tr:nth-child(even) {
    background: #47bb60;
}

HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
    <link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet" />
</head>
<body>
<div id="wrapper"></div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
    <script type="text/javascript" src="js.js"></script>
</body>
</html>

你的CSS样式不生效是因为选择器优先级不足，Grid.js自带的mermaid主题样式里，行背景的选择器比你写的更具体，直接覆盖了你的设置。

修复方案 #

修改你的CSS选择器，提高优先级，确保能覆盖默认样式：

th {
    box-sizing: border-box;
    background: #1f61cf;
    color: #fff;
}

/* 更具体的选择器，覆盖默认主题样式 */
.gridjs-table tbody tr.gridjs-tr:nth-child(even) {
    background-color: #47bb60;
}

如果上述方法仍然不生效，可以临时使用!important强制覆盖（建议优先用优先级解决，!important作为最后手段）：

.gridjs-table tbody tr.gridjs-tr:nth-child(even) {
    background-color: #47bb60 !important;
}

额外说明 #

如果你需要排除某一行（比如指定某一行不应用背景色），可以结合:not()选择器，例如排除第3行：

.gridjs-table tbody tr.gridjs-tr:not(:nth-child(3)) {
    background-color: #47bb60;
}

内容的提问来源于stack exchange，提问作者Avanish Paswan