1

我有一个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;  }

我已经在我的 JSP 中包含了这个 CSS。但是我需要与我的颜色不同的颜色，base.css所以我声明了如下内容：

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

在我的 JSP 中。我之前遇到过这个问题，并发现了 CSS Specificity。第一个的特殊性是，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>
4

3 回答 3

2

不要在 上应用自定义 CSS ，而是在 上tr应用它th。像这样：

#demo th.header {
   background:#FDBB30
}

同样在您的 HTML 中，确保您已经使用id="demo"了您的table或div包含该table.

JSFiddle 上的这个演示可能会有所帮助。

于 2013-08-29T06:35:13.790 回答
1

这个选择器是错误的

#demo table.header tr

首先，我没有看到demo那里声明的任何 id ，也是table.header不正确的，这意味着选择table带有类的header，但是由于您将该类应用于th选择器将失败。

调用classontable元素

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

还要确保你有一个包装元素，例如div一个 id 为demo

仍然对上面的东西不满意，只需id在你table喜欢的地方使用

<table id="change_color" ...>

而不是使用下面的选择器

#change_color thead tr {
   background: #f00;
}

演示

于 2013-08-29T06:32:50.970 回答
1

除了 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}

背景仍然是青色的！见小提琴。

于 2013-08-29T07:35:39.350 回答