为何用于设置表格的class作用不上来?

样式class1使用后没反应,代码如下

 <style type="text/css">
            #city th{
                background-color: darkcyan;
            }
            #city tfoot td{
                background-color: darkgrey;
            }
        #city{
                border-collapse: collapse;/*设置表格的边框合并为一个单一的边框*/
                /*border: 1px solid salmon;*/
            }
            #city th,td{
                border: 1px solid salmon;
            }
            .class1{
                border-bottom: 1px  solid darkseagreen;
            }
        </style>
    </head>
    <body>
        <table width="400px"  id="city" >
            <caption>首都</caption>
            <thead>
                <tr>
                    <th>北京</th>
                    <th>北京</th>
                    <th>北京</th>
                </tr>
            </thead>
                <tr class="class1">
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
                    <tr class="class1">
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                </tr>
            <tfoot>
                <tr><td colspan="3">以上资料纯属虚假</td></tr>
            </tfoot>

        </table>

    </body>
</html>
     tr.class1 td {
        border-bottom: 1px solid darkseagreen;
    }
 被td的边框样式覆盖了
#city th,td{ border: 1px solid salmon; }