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