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 和编写选择器，以便它们更具体。