CSS表命名

Question

有没有什么办法可以将这个CSS代码重命名为只影响某个表而不是我网站上的所有表？

th { 
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #4f6b72; 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
letter-spacing: 2px; 
text-transform: uppercase; 
text-align: left; 
padding: 6px 6px 6px 12px; 
} 

th.nobg { 
border-top: 0; 
border-left: 0; 
background: #C1DAD7; 
} 

td { 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
background: #fff; 
padding: 6px 6px 6px 12px; 
color: #4f6b72; 
} 

td.alt { 
background: #F5FAFA; 
color: #797268; 
} 

th.spec { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #fff; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
} 

th.specalt { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #f5fafa; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #797268; 
} 

和HTML代码：

<table id="mytable" cellspacing="0"> 
    <tr> 
    <th width="202" class="nobg" scope="col">Configurations</th> 
    <th width="250"></th> 
</tr> 
<tr> 
    <th scope="row" class="spec">Model</th> 
    <td>M9454LL/A</td> 
</tr> 
<tr> 
    <th scope="row" class="specalt">G5 Processor</th> 
    <td class="alt">Dual 1.8GHz PowerPC G5</td> 
</tr> 
<tr> 
    <th scope="row" class="spec">Frontside bus</th> 
    <td>900MHz per processor</td> 
</tr> 
<tr> 
    <th scope="row" class="specalt">Level2 Cache</th> 
    <td class="alt">512K per processor</td> 
</tr> 
</table> 

Answer 1

专门针对您显示的HTML代码表，这样做：

#mytable th { 
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #4f6b72; 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
letter-spacing: 2px; 
text-transform: uppercase; 
text-align: left; 
padding: 6px 6px 6px 12px; 
} 

#mytable th.nobg { 
border-top: 0; 
border-left: 0; 
background: #C1DAD7; 
} 

#mytable td { 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
background: #fff; 
padding: 6px 6px 6px 12px; 
color: #4f6b72; 
} 

#mytable td.alt { 
background: #F5FAFA; 
color: #797268; 
} 

#mytable th.spec { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #fff; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
} 

#mytable th.specalt { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #f5fafa; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #797268; 
} 

你不会需要全表＃mytable的。

Answer 2

把table#mytable在每一个CSS选择器的前面。

table#mytable th{ 
} 
table#mytable th.nobg{ 
} 
table#mytable td{ 
} 
table#mytable td.alt{ 
} 
table#mytable th.spec{ 
} 
table#mytable th.specalt{ 
} 

或者只是#mytable。

#mytable th{ 
} 
#mytable th.nobg{ 
} 
#mytable td{ 
} 
#mytable td.alt{ 
} 
#mytable th.spec{ 
} 
#mytable th.specalt{ 
} 

Answer 3

您可以用前缀你的表ID（#mytable）每一个规则，所以你必须像

#mytable th { 
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #4f6b72; 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
letter-spacing: 2px; 
text-transform: uppercase; 
text-align: left; 
padding: 6px 6px 6px 12px; 
} 

#mytable th.nobg { 
border-top: 0; 
border-left: 0; 
background: #C1DAD7; 
} 

#mytable td { 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
background: #fff; 
padding: 6px 6px 6px 12px; 
color: #4f6b72; 
} 

#mytable td.alt { 
background: #F5FAFA; 
color: #797268; 
} 

#mytable th.spec { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #fff; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
} 

#mytable th.specalt { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #f5fafa; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #797268; 
} 

Answer 4

你可以改变你的CSS选择器仅匹配特定的表ID，所以例如..

#mytable th { 
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #4f6b72; 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
letter-spacing: 2px; 
text-transform: uppercase; 
text-align: left; 
padding: 6px 6px 6px 12px; 
} 

#mytable th.nobg { 
border-top: 0; 
border-left: 0; 
background: #C1DAD7; 
} 

#mytable td { 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
background: #fff; 
padding: 6px 6px 6px 12px; 
color: #4f6b72; 
}