如何在 CSS 中添加几个 td 和 tr答案

【问题标题】：How to add several td and tr in CSS如何在 CSS 中添加几个 td 和 tr
【发布时间】：2012-10-29 03:08:07
【问题描述】：

我有一个如下所示的 CSS：

CSS

table {   
 width: 100%;
 font-family: calibri;
 word-wrap:break-word;
 margin-left: 0; 
 font-size: 1.1em;
 border-collapse: separate;
 border-spacing: 1px;      
}

td {  
 text-transform: none;
 font-weight: bold;
 line-height: 115%;
 word-wrap:break-word;  
 vertical-align: middle; 
 padding: 2px 10px 0 3px ; 
 border-radius: 2px;
 border: 1px solid #6A797F;        
}   

tr:nth-child(odd){
 background-color: #a9c6c9; 
}

tr:nth-child(even){
 background-color: #d4e3e5;
}

如何在 CSS 文件的某处添加单独的 <table>、<td> 和 <tr>，我可以在其中更改样式以适应该特定页面的设计目的。我尝试了这个解决方案，但没有奏效：

.members_col1 tr td{
  text-transform: none;
  line-height: 115%;
  word-wrap: break-word;  
  vertical-align: left; 
}

.member_col1 是包含<table> 的<div> 我想添加一组新样式。

【问题讨论】：

标签： html css html-table row

【解决方案1】：

在你的表中使用属性id或者类，然后在css中将它们覆盖为选择器，例如：

<table id="another-table">...

css
#another-table{
....
}

或

<table class="tables">...
<table class="tables">...

css
.tables{
...
}

【讨论】：

【解决方案2】：

在你的 html 中使用它：

<table class="newTable">
...
</table>

并使用这个 CSS：

.newTable tr td{
   text-transform: none !important;
   line-height: 115% !important;
   word-wrap:break-word !important;  
   vertical-align: left !important; 
   }

【讨论】：

他的问题不是特异性的。 class element element = 0.1.2，默认 (element) 为 0.0.1。 !important 仅在特异性失败时才有用。