css - 如何删除遗传样式

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

来源

2012-05-16 TheOnlyIdiot

我可能会创建一个子表一个单独的类，但短期的，这里是一个解决方案：

.dataTable td table, .dataTable td table tbody, .dataTable td table td { 
    border:none; 
}

http://jsfiddle.net/ymSpY/6/

编辑：这里有一个为子表定义的类，当您开始向主数据表中添加其他元素时，这可能会给您更多的灵活性。 http://jsfiddle.net/ymSpY/11/

来源

2012-05-16 06:30:50 Tom

它工作！非常感谢！！！ – TheOnlyIdiot

你打赌！请享用：） – Tom

您可以将您的规则只对眼前的孩子：

.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/

来源

2012-05-16 06:23:33 Sampson

我试过了，现在它仍然存在。 – TheOnlyIdiot

为什么表格最右边的部分有红色边框？ – TheOnlyIdiot

@TheOnlyIdiot忽略那个 - 我在乱搞。这里最重要的是'''表示规则只适用于直接的孩子。 – Sampson

我很困惑。你改变了边界的颜色，为什么不把它们设置为0呢？

.dataTable td table td { 
    border-top: 0; 
    border-left: 0; 
    border-bottom: 0; 
    border-right: 0; 
}

例http://jsfiddle.net/ymSpY/4/

来源

2012-05-16 06:25:13 LeeR

如何删除内部表的继承样式？ – TheOnlyIdiot

用另一种风格重写它。您无法删除继承的样式，因为这是浏览器在默认情况下提供的样式。 – LeeR

我不想删除父表的边框。 – TheOnlyIdiot

css - 如何删除遗传样式

回答

相关问题