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

【问题标题】：fastest way to use css for html table without affecting another html table在不影响另一个 html 表的情况下，将 css 用于 html 表的最快方法
【发布时间】：2017-04-13 04:38:04
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案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; }

【讨论】：

确实，这几乎就像“命名空间”你的 CSS 定义。
我目前还不是 CSS 专家 - 但根据我的测试，上面的 CSS 中至少存在一个错误：.mytable td, th {/* ... */} 仅影响具有 @987654325 类的 td（单元格） @（因为表类）- 但是它会影响所有表头 th。恕我直言，正确的语法必须是：.mytable td, .mytable th {/* ... */}。（在当前版本的 chrome、firefox 和 IE 中测试）

【解决方案2】：

在您的 CSS 中定义一个 ID 或 CLASS 会影响相关表格。

然后，在你的 HTML 代码中，说

<table id="theid"... />

或

<table class="theclass" ... />

CSS ID 看起来像

#theid
{
  //attributes
}

类看起来像：

.theclass
{
  //attributes
}

【讨论】：

我推荐table#theid，因为 id 是一次性使用的，我认为这最能回答这个问题。

【解决方案3】：

这正是 id 和 class 属性的用途。如果您不能更改标记（例如设置 myspace 的样式），那么您需要使用选择器来更精确地定位一个表。选择器的选择需要您自己决定。

【讨论】：

【解决方案4】：

对于多个表和类

HTML 表格

<table id="tableId1">
--Table Content--
</table>

<table id="tableId2">
--Table Content--
</table>

<table class="tableClass1">
--Table Content--
</table>

<table class="tableClass2">
--Table Content--
</table>

CSS 脚本

#tableId1, #tableId2
{
  //attributes
}

.tableClass1, .tableClass2
{
  //attributes
}

【讨论】：

【解决方案5】：

下面是类选择器和标记，它们将设置第一个表的样式，而不是第二个：

<style>
table.special { border: 1px solid #839E99; ... }
table.special caption { font-size: 1.3em; ... }
...
</style>
<table class="special">...</table>
<table>...</table>

或者您可以以类似的方式使用 ID 选择器：

<style>
#my-special-table { border: 1px solid #839E99; ... }
#my-special-table caption { font-size: 1.3em; ... }
...
</style>
<table id="my-special-table">...</table>
<table>...</table>

有时会爆发一场关于使用这两种方法中的哪一种的宗教战争。两者都可以满足您的需求。根据规范，您最多只能将给定 ID 放在 HTML 中的一个元素上（但大多数浏览器都允许您打破该规则）。

【讨论】：

【解决方案6】：

将类名应用到要应用 css 的表上就可以了……

【讨论】：

【解决方案7】：

虽然您应该向要影响的表添加一个类，但我们假设您只能修改 css。在这种情况下，你可以很喜欢selectors。但并非所有browsers support 他们。您可以看到 CSS 2 selectors 不支持第 n 个子概念。否则，如果你有类似的 html：

<html><head></head><body>
<table><tr><td>First</td></tr></table>
<table><tr><td>Second</td></tr></table>
<table><tr><td>Third</td></tr></table>
</body></html>

您可以使用 CSS2 选择器定位第一个，但第二个和第三个只能使用 CSS3 选择器定位。

table:first-child td {background-color:red;} /* CSS2, pretty wide support */
table:nth-child(2) td {background-color:red;} /* CSS3, limited support */

【讨论】：

【解决方案8】：

按类别选择表格以设置所需表格的样式，例如，如果您有表格：

<table class="tableOne"></table>
<table class="tableTwo"></table>

然后在 CSS 中，你会使用这样的东西：

.classOne {
  /* do your stuff here*/
}

.classTwo {
  /* do your stuff here*/
}

【讨论】：