Question

我有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

而不是在tr上应用自定义CSS，而是将其应用于th。像这样：

#demo th.header {
   background:#FDBB30
}

同样在您的HTML中，请确保您使用id="demo"用于table或包含div的{{1}}。

这demo on JSFiddle可能会有所帮助。

Answer 2

此选择器错误

#demo table.header tr

首先，我没有看到在那里声明的demo个ID，table.header也不正确，这意味着选择table类header但是因为您将该类应用于th，所以选择器将失败。

致电class元素<{1}}

table

另外请确保您有一个包装元素，例如<table class="header" cellpadding="0" cellspacing="0" border="0" align="left" width="100%" >，其ID为div

仍然不满意上述内容，只需在demo上使用id

table

然后使用下面的选择器

<table id="change_color" ...>

Demo

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。

HTML表格中的CSS特性问题

3 个答案: