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; }

Answer 2

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

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

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

或

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

CSS ID看起来像

#theid
{
  //attributes
}

类看起来像：

.theclass
{
  //attributes
}

Answer 3

这正是id和class属性的用途。如果您无法更改标记（如样式化myspace），则需要使用选择器更精确地定位一个表。选择器的选择是你需要自己决定的。

Answer 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
}

Answer 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>

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

Answer 6

将类名应用于要应用的表css rest很好......

Answer 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 */

Answer 8

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

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

然后在CSS中，您将使用以下内容：

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

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

在不影响另一个html表的情况下，为html表使用css的最快方法

8 个答案: