css - 两种不同的表格样式

Question

我有这样的表格:

table { width: 100%; border: 0; margin-bottom: 2em;  }

 table thead th
 {
    font-size: 13px;
    font-weight: bold;
    text-align: left;
    padding: 10px;

    background-color: #263849 !important;

    color: #FFF;

    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}       

table td { vertical-align: top; }

table tbody tr td { background: #f4f4f4;  border-bottom: 1px solid #D5D5D5;
border-top: 1px solid white; }

table th { padding: 10px 0; }
table tbody td { padding: 10px; }

table tr.even td { background: #F9F9F9; }

tr:nth-child(odd) { background-color:#F9F9F9; }
tr:nth-child(even) { background-color:#FFF; }

现在在同一页面上我想要另一个具有不同样式的表格。

所以我说的那个表是 table class="ver2"

我应该如何为这个不同的表格设计样式？它开始让我头疼。

Answer 1

您可以通过使用 CSS 为第二个表格设置特定样式:

table.ver2    {/*whatever your declarations are...*/}
table.ver2 th {/*declarations*/}

等...

既然您决定使用一个类，您就需要为您的 CSS 规则使用句点符号。如果您选择使用“id”属性，则应将句点替换为井号 (#)。