css - 如何删除继承的样式

Question

请看:http://jsfiddle.net/ymSpY/.如果你能看到<td>有内表.内部表继承父表的样式.内表有边框.如何使边框不可见或将其删除？正如你可以看到内部表的标记,style="border-collapse: collapse;"我甚至尝试过,border=0 但它不起作用.内/子表的边框仍然存在.

Answer 1

您只能将您的规则应用于直接子女:

.dataTable > thead, 
.dataTable > thead > tr > th, 
.dataTable > tbody, 
.dataTable > tbody > tr > td {
    padding:       2px;
    border-top:    1px solid #F5F2EF;
    border-left:   1px solid #F5F2EF;
    border-bottom: 1px solid #F5F2EF;
    border-right:  1px solid #F5F2EF;
}

这样,边界规则不会向下渗透到嵌套表.唯一的另一个选择是进行大量的重置,这将很快导致你的CSS变成kudzu.

演示:http://jsfiddle.net/ymSpY/10/