CSS样式冲突

Question

我有一个由设计者完全以表格格式创建的网站。我在其单元格中嵌入另一个表格，事情是我的表格有它自己的样式表。当我从外部链接我的网站时，整个网站都会变形。我想要的是我的样式表在我的桌子上工作。

如何在不导致整个网站冲突或覆盖的情况下包含此样式表？

Answer 1

如果没有更好的选择，那么给你的table一个id或特定的class。然后在你所有的CSS声明中使用它，确保内部的样式只适用于你的新表。 This article进一步解释了伪命名距离的想法，这值得考虑。

所以不是：

td { border: 1px solid black; } 

你会的，如：

.myClass td { border: 1px solid black; } 

Answer 2

有两种东西照顾：1）防止您的样式表而影响使用的表用于格式化整个表格，以及2）防止表格格式化影响您的表格。您的样式表必须修改为此。

从分配一个唯一的id开始，然后在样式表的所有规则中使用相应的选择器（请参阅Rob W的答案）。这足以满足1）。它大部分都足以满足2），但并非总是如此。你应该测试它并查看整个样式表。这里没有快捷方式。

为了说明这个问题，假设你希望你的表有围绕单元格的边界。为此，您可以有table#foo td { border: solid; }。但如果整体样式表有td { border: none !important; }。这不是很好的做法，但是这样的东西被使用;作者经常使用!important没有很好的理由。在这种情况下，如果整个样式表无法更改，那么在样式表中也需要使用!important。在极端情况下，您甚至可能需要使用!important和编写选择器，以便它们更具体。