css - TR :nth-child not working in mvc view

Question

我阅读了很多关于我的问题的问题，但没有一个对我的情况真正有效。我在我的 View 的上半部分有这种风格(我知道，我稍后会把它转移到 Bootstrap )。我的目标是使我的表具有替代行底纹。我现在并不特别关心颜色，我只想要功能。

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

一切正常，除了第 nth-child 样式。请协助。抱歉代码墙，我只需要指出我在那里有一个 if 结构。

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

Answer 1

那是因为你有background: white;在 td

移动background: white;来自 table,th,td {放在table {下