CSS 样式冲突
我有一个由设计师完全以表格格式创建的网站。我正在其单元格中嵌入另一个表格，问题是我的表格有自己的样式表。当我从外部链接我的网站时，整个网站都会变形。我想要的只是我的样式表在我的桌子上工作。
如何包含此样式表而不导致整个站点发生冲突或覆盖？
I have a website created by a designer entirely in a table format. I am embedding another table within its cell, the thing is my table has its own stylesheet. When I link mine externally, the entire site get warped. All I want is my Stylesheet to work on my table.
How do I include this stylesheet without causing a conflict or override on the entire site?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果没有更好的选择，请为您的
table指定一个id或特定的class。然后在所有 CSS 声明中使用它，确保其中的样式仅适用于您的新表。 这篇文章解释了进一步的伪命名空间值得考虑。因此，
您可以使用：
If there's no better option, then give your
tableanidor specificclass. Then use this in all your CSS declarations, ensuring the styles within will apply to only your new table. This article explains the idea of pseudo-namespacing further, which is worth considering.So instead of:
You would have, e.g.:
有两件事需要注意：1) 防止样式表影响用于格式化整个表的表，2) 防止该表的格式影响您的表。您的样式表必须为此进行修改。
首先为您的表分配一个唯一的
id，然后在样式表的所有规则中使用相应的选择器（请参阅 Rob W 的回答）。这足以满足 1) 的要求。它基本上也足以满足 2) 的要求，但并非总是如此。您应该对其进行测试并查看整体样式表。这里没有快速的方法。为了说明问题点，假设您希望表格在单元格周围有边框。为此，您可以使用 table#foo td { border:solid; }。但如果整体样式表有 td { border: none !important; }。这不是一个好的做法，但是这样的东西确实被使用了；作者经常毫无理由地使用
!important。在这种情况下，如果无法更改整体样式表，则您还需要在样式表中使用!important。在极端情况下，您甚至可能需要使用!important和 编写选择器，以便它们更加具体。There are two kinds of things to take care of: 1) preventing your style sheet from affecting the table used for formatting the entire table, and 2) preventing the formatting of that table from affecting your table. Your style sheet must be modified for this.
Start from assigning a unique
idto your table and then using the corresponding selector in all rules of your stylesheet (see Rob W’s answer). This suffices for 1). It mostly suffices for 2), too, but not always. You should test it and have a look at the overall style sheet. There is no quick way here.To illustrate the problematic point, suppose that you want your table to have borders around cells. For this you could have
table#foo td { border: solid; }. But if the overall style sheet hastd { border: none !important; }. That’s not good practice, but such things are used; authors often use!importantfor no good reason. In this case, if the overall style sheet cannot be changed, you would need to use!importantin your style sheet, too. In extreme cases, you might even need to use!importantand write selectors so that they are more specific.