css - CSS 组合表格样式

Question

我发现类似的顶部组合使用逗号分隔它们的类；但是，当我使用表类尝试它时，只有最后一个表正在接收样式。这是我要清理的一小部分示例：

table.tslist { 
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    cellspacing: 0; 
    border-collapse: collapse; 
    width: 225;    
}
table.djrlist { 
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    cellspacing: 0; 
    border-collapse: collapse; 
    width: 225;    
}
table.vacation { 
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    cellspacing: 0; 
    border-collapse: collapse; 
    width: 225;    
}
table.tslist td { 
    border-left: 1px solid #999; 
    border-top: 1px solid #999;  
    padding: 2px 4px;
}
table.djrlist td { 
    border-left: 1px solid #999; 
    border-top: 1px solid #999;  
    padding: 2px 4px;
}
table.vacation td { 
    border-left: 1px solid #999; 
    border-top: 1px solid #999;  
    padding: 2px 4px;
}

正如我提到的，我尝试过table.tslist, table.djrlist, table.vacation {....}但没有运气。

Answer 1

我猜你正在做这样的事情：

table.x, table.y td { }

并假设它将扩展并应用于所有 TD 元素。它不会。你需要这样的东西：

table.x td, table.y td { }

Answer 2

确保在分隔符中包含元素类型：

table.tslist,
table.djrlist,
table.vacation
{ 
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    cellspacing: 0; 
    border-collapse: collapse; 
    width: 225;    
}
table.tslist td, <-----
table.djrlist td, <-----
table.vacation td <----- { 
    border-left: 1px solid #999; 
    border-top: 1px solid #999;  
    padding: 2px 4px;
}

Answer 3

我猜你甚至不需要像那样做多种风格。类与 ID 不同，您可以多次使用它们。

如果所有表格的样式都相同，只需替换所有这些：

 <table class="tslist">...</table>
 <table class="vacation">...</table>
 <table class="djrlist">...</table>

和

 <table class="tslist">...</table>
 <table class="tslist">...</table>
 <table class="tslist">...</table>

然后，您可以从 css 文件中删除未使用的样式条目。