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和編寫選擇器，以便它們更具體。