tr：nth-​​child不在mvc视图中工作

Question

我读了很多关于我的问题的问题，但没有一个对我的案例有效。我在我的视图的上半部分有这种风格（我知道，我稍后会把它转移到引导程序）。我的目标是让我的表有替代的行阴影。我现在不特别关心颜色，我只想要功能。

我在Mozilla和Chrome上运行该网站。我刷新了缓存。

<style>
    table, th, td {
        border: 2px solid gray;
        border-collapse: collapse;
        border-right: none;
        background: white;
        color: #333333; /*#333333*/
    }

    table {
        border-left: none;
    }

    th {
        text-align: center;
    }

    tr:nth-child(odd)       { background:#eee; }
    tr:nth-child(even)      { background:#fff; }
</style>

我有一个表格，格式如下：

<div class="tableIndex">
        <table id="tableBe">
            <tr>
               <th></th>
            </tr>
            @if (Model.Count() == 0)
            {
                <tr>
                    <td colspan="25" , align="left" style="border-left:none !important">
                        <b>No issues match search criteria</b>
                    </td>
                </tr>
            }
            else
            {
                foreach (var item in Model)
                {
                    <tr>
                        <td></td>
                    </tr>
                }
            }
        </table>
    </div>

一切都有效，除了第n个孩子的造型。请协助。对不起代码墙，我只需要指出我有一个if构造。

当我尝试检查元素时，我没有引用tr：nth-​​child命令，尽管我在<style>中得到了其他效果。请协助。提前谢谢！

Answer 1

您之前已设置td的背景。因此，设置tr的背景而不是tr:nth-child(odd) td { background:#eee; } tr:nth-child(even) td { background:#fff; } 。以下应该工作

table, th, td {
    border: 2px solid gray;
    border-collapse: collapse;
    border-right: none;
    background: white;
    color: #333333; /*#333333*/
}

table {
    border-left: none;
}

th {
     text-align: center;
}

tr:nth-child(odd) td {
     background: #eee;
 }

tr:nth-child(even) td {
     background: #fff;
}

完整代码

＆＃13;

＆＃13;

<table>
    <tr><td>111111111</td><td>2222222222</td></tr>
    <tr><td>111111111</td><td>2222222222</td></tr>
    <tr><td>111111111</td><td>2222222222</td></tr>
    <tr><td>111111111</td><td>2222222222</td></tr>
</table>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是因为background: white;

上有td

从background: white;移动table,th,td {并将其放在table {

下

Answer 3

您的代码根据您的情况为您的tr应用了颜色。但是它已经覆盖了你为th和td背景颜色应用的样式。所以改变你的风格如下。

    tr:nth-child(odd) td{ background:#eee; }
    tr:nth-child(even) td { background:#fff; }

DEMO