在HTML表格

Question

CSS具體問題，我有一個base.css具有以下CSS：

.table thead tr th, table th { 
    text-align:left; 
    font-size: 11px; 
    font-weight: bold; 
    color: #333; 
    padding: 4px; 
    background-color: #EEE; 
    border: #FFF solid; 
    border-width: 1px 1px 0 0; 
    border-left: #e7e7e7; 
    white-space:nowrap; } 

我已經包含這個CSS在我的JSP。但我需要不同的顏色一個比我base.css，所以我宣佈類似：

#demo table.header tr { 
    background:#FDBB30 
} 

在我的JSP。我之前遇到過這個問題，並且發現了CSS特定性。第一個的特異性是0,0,1,5，第二個的特異性是0,1,1,2。據它，表格應呈現第二個CSS。但事實並非如此。有什麼建議麼.. ？我無法刪除base.css我需要它用於其他元素。

我的表像：

<table cellpadding="0" cellspacing="0" border="0" align="left" width="100%"> 
    <thead> 
     <!-- Column Naming for the table --> 
     <tr> 
     <th class="header">SName</th> 
     <th class="header">Report</th> 
     <th class="header">Owner</th> 
     <th class="header">STime</th> 
     <th class="header">SFreq</th> 
     <th class="header">SDate</th> 
     <th class="header">EDate</th> 
     <!-- <th>Action</th> --> 
     </tr> 
    </thead> 
</table> 

Answer 1

這個選擇是錯誤的

#demo table.header tr 

首先我沒有看到有宣佈任何demo ID，也table.header不正確，這意味着選擇table與類header但由於您正在將該類應用於th選擇器將失敗。

調用class上table元素

<table class="header" cellpadding="0" cellspacing="0" border="0" align="left" width="100%" > 

另外，還要確保你已經包裝元素，比方說一個div與demo

---

仍然是一個ID不舒服的事情以上，只需在您的table上使用id即可，如

<table id="change_color" ...> 

，比使用選擇以下

#change_color thead tr { 
    background: #f00; 
} 

Demo

Answer 2

而是在tr應用自定義CSS的，它適用於th。就像這樣：

#demo th.header { 
    background:#FDBB30 
} 

而且在你的HTML，請確保你已經使用id="demo"無論是針對table或含有table一個div。

This demo on JSFiddle may help。

Answer 3

除了CSS選擇器中的錯誤（請參閱其他答案），還有一個簡單的事實，即表格單元格中的背景被繪製在表格行中的「背景」背景上，因此它們將始終覆蓋它們，無論如果tr的特異性要高得多！

如果HTML

<table id="table"> 
    <tr id="tr"><th>hello</th></tr> 
</table> 

和CSS是

th {background:cyan} 
body table#table tr#tr {background:yellow !important} 

背景將仍然是青色！請參閱fiddle。