表格标题的CSS，甚至奇数行？答案

【问题标题】：CSS for Table headers,even odd rows?表格标题的CSS，甚至奇数行？
【发布时间】：2013-06-13 02:25:01
【问题描述】：

我的表结构如下：

<table>
 <thead>
   <tr class="navigation">
   </tr>
 </thead>
 <thead>
   <tr class="headers">
   </tr>
 </thead>
 <tbody>
  <tr class="even">
    <td><a href="#"/></td>
  </tr>
  <tr class="odd">
  </tr>
  </tr>
 </tbody>
</table>

我已经定义了以下 CSS，如何在我的 CSS 中应用“导航”、“标题”、“偶数”、“奇数”类？如何定义它们与 'table.even','table.odd' 之类的 'table' 类相关？谢谢

table{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 10px;
    #margin: 45px;
    width:100%;
    text-align: left;
    border-collapse: collapse;  
}

【问题讨论】：

您的 HTML 中有一些错误，例如同一个表中有一个额外的 </tr> 和两个 <thead> 元素。您的 CSS 中还有一个随机的 #。我猜这些只是复制和粘贴错误。 ;)

标签： html css

【解决方案1】：

更简单，不需要类：

tbody tr:nth-child(odd) {
    put your style here...
}

tbody tr:nth-child(even) {
    put your style here...
}

希望能帮到你！

【讨论】：

【解决方案2】：

如果您必须为不止一种类型的元素使用类名，则仅引用父元素的类或父元素本身。例如，这个：

.navigation { font-weight:bold }

...而不是这个：

tr.navigation { font-weight:bold }

它将减少浏览器呈现页面时的加载时间。

参考：Optimize browser rendering[谷歌代码]

【讨论】：

为了未来的可维护性，至少对表进行分类并使用一点继承是一个好主意，除非您 100% 这是一个全局类。

【解决方案3】：

将类应用于任何元素允许您执行以下操作：

element.className { rules }

因此，使用您的TR，您可以执行以下操作：

tr.navigation { font-weight:bold }

因此，可以像这样在赔率和事件行上创建斑马条纹：

tr.odd  { background-color:#FFF; }
tr.even { background-color:#CCC; }

【讨论】：

【解决方案4】：

你会使用

table thead tr.navigation {}
table thead tr.headers {}
table tbody tr.even {}
table tbody tr.odd {}

【讨论】：

@devians，根据我的回答，这完全是低效的。最好对表格行使用 .navigation，如果必须在不同元素上定义不同样式，请使用不同的类名。