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 变成葛根。

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