最快的方式来使用CSS的HTML表格，而不会影响另一个HTML表格

我的CSS位于http://sillybean.net/css/seaglass.css，我想用这个CSS只有一个HTML表，在同一页上我有多个HTML表，所以我不想影响其他html表格。在http://sillybean.net/css/seaglass.css上进行少量修改的最快方式是什么？最快的方式来使用CSS的HTML表格，而不会影响另一个HTML表格

来源

2009-06-19 cometta

你可以将一个类应用到你想要影响的表，然后在你的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; }

来源

2009-06-19 05:07:33 MiffTheFox

事实上，这几乎是像 “命名空间” 你的CSS定义。 – 2009-06-19 05:08:32

我到目前为止不是CSS专家 - 但根据我的测试，上面的CSS中至少有一个错误：`.mytable td，th {/ * ... * /}`只影响`td`（单元格）有'mytable'类（因为表类） - **但**它影响**所有表头**`th`。恕我直言，正确的语法必须是：`.mytable td，.mytable th {/ * ... * /}`。（在Chrome，Firefox和IE的当前版本中测试过） – 2015-11-25 08:04:00

应用类的名称，您要申请表css休息很好...

来源

2009-06-19 05:08:58

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

来源

2009-06-19 05:10:06 SpliFF

在你的CSS中定义一个ID或CLASS，这会影响到有问题的表。

然后，在你的HTML代码，说

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

或

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

CSS的ID看起来像

#theid 
{ 
    //attributes 
}

类的样子：

.theclass 
{ 
    //attributes 
}

来源

2009-06-19 05:10:38 Sev

这里有一流的选择和标记将样式表头，但不是第二：

<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（但大多数浏览器允许您打破该规则）。

来源

2009-06-19 05:13:41

虽然您应该向要影响的表添加类，但我们假设您只能修改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 */

来源

2009-06-19 05:42:21 dlamblin

对于多表和类

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 
}

来源

2014-06-15 18:46:28 vineetv2821993

-1

按类别选择表，如果你造型所需的表如有表：

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

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

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

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

来源

2016-07-24 18:14:52 user6632262

最快的方式来使用CSS的HTML表格，而不会影响另一个HTML表格

回答

相关问题