html - 在不影响另一个 html 表的情况下将 css 用于 html 表的最快方法

Question

我的 CSS 位于 http://sillybean.net/css/seaglass.css我只想将此 css 用于 html 表之一，在同一页面上我有多个 html 表，所以我不想影响其他 html 表。在 http://sillybean.net/css/seaglass.css 上进行较少修改的最快方法是什么？ ？

Answer 1

您可以只将一个类应用于您想要影响的表格，然后在您的 CSS 中使用该类吗？

在您的 HTML 中，您可以放置​​:

<table class="mytable">
... CONTENT OF THE TABLE, AS NORMAL ...
</table>

然后，将类选择器添加到您的 CSS:

table.mytable { border-collapse: collapse; border: 1px solid #839E99;
                background: #f1f8ee; font: .9em/1.2em Georgia, "Times New Roman", Times, serif; color: #033; }
.mytable caption { font-size: 1.3em; font-weight: bold; text-align: left; padding: 1em 4px; }
.mytable td,
.mytable th { padding: 3px 3px .75em 3px; line-height: 1.3em; }
.mytable th { background: #839E99; color: #fff; font-weight: bold; text-align: left; padding-right: .5em; vertical-align: top; }
.mytable thead th { background: #2C5755; text-align: center; }
.mytable .odd td { background: #DBE6DD; }
.mytable .odd th { background: #6E8D88; }
.mytable td a,
.mytable td a:link { color: #325C91; }
.mytable td a:visited { color: #466C8E; }
.mytable td a:hover,
.mytable td a:focus { color: #1E4C94; }
.mytable th a,
.mytable td a:active { color: #fff; }
.mytable tfoot th,
.mytable tfoot td { background: #2C5755; color: #fff; }
.mytable th + td { padding-left: .5em; }