问题描述

为何用于设置表格的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; }