Question

我的表结构如下：

<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'类相关，如'table.even'，'table.odd'？谢谢

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

Answer 1

更简单，不需要上课：

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

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

我希望有所帮助！

Answer 2

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

.navigation { font-weight:bold }

......而不是：

tr.navigation { font-weight:bold }

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

参考：Optimize browser rendering [Google代码]

Answer 3

你会用

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

Answer 4

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

element.className { rules }

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

tr.navigation { font-weight:bold }

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

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

表头的CSS，甚至奇数行？

4 个答案: