表的每行CSS不同的颜色

问题描述

| 我的表格具有以下CSS格式：

<table cellspacing=\"2\">
    <tbody>
        <tr>
            <th>Name</th>                            
            <th>Area</th>                            
        </tr>
        <tr>
            <td>${it.conference}</td>                                              
            <td>${it.accepted}</td>                                      
        </tr>
    </tbody>
</table>

和CSS：

table {
    padding-left: 10px;
    width:90%;
    font-family:Arial,Helvetica,sans-serif;
    font-size:11px;
    text-align:left;
}

th,td {
    padding:5px 10px;
}

th {
    color:#666666;
    border-top:2px solid #b7ddf2;
    background-color:#ebf4fb;
}

我如何才能对每一行进行单独的CSS修改（例如，我想更改\'Name \'的颜色，而又不弄乱其他行的格式，这意味着只能修改该行。） ？     

解决方法

使用仅CSS的方法，您需要在要设置样式的行中添加一些类，如下所示：

<table cellspacing=\"2\">
      <tbody><tr>
         <th class=\"color1\">Name</th>                            
         <th>Area</th>                            
     </tr>
        <td>${it.conference}</td>                                              
        <td>${it.accepted}</td>                                      
     </tr></tbody>
    </table>

然后设置样式：

.color1 {
   background-color: (somecolor);
}

    ,您是否在寻找类似于第n个子CSS伪类的东西？ 如果您希望对每个人进行更精细的控制，则可能需要考虑将类应用于他们并以不同的方式设置他们的样式。 编辑：这是nth-child的一些示例。     ,如果不支持IE 7和8就可以脱身，可以...

th:nth-of-type(1) {
  color: #c00;
}

否则，添加一个类，例如th class = \“ whatever \”，然后...

th.whatever {
  color: #c00;
}

观看现场演示： http://jsfiddle.net/GFPgB/     ,如果要基于元素的内容应用CSS样式，则CSS无法实现。另一方面，如果您想根据其位置应用CSS样式，则可以使用：nth-​​child（N）伪类。例如

th:nth-child(1) /*for name*/
{
color: blue;
}

th:nth-child(2) /*for area*/
{
color: red;
}

    ,将类应用于所需的任何元素，然后对其进行CSS样式设置。 http://jsfiddle.net/robx/wzXAJ/ IE：申请

<th class=\"name\">Name</th>

。     ,要设置“偶数”和“奇数”行的样式，然后使用CSS3 喜欢：

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

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

    ,我知道这是一个旧答案，但是我在Jquery中做了一个有趣的示例，也许它将对某些人的问题有所帮助。 JSFIDDLE 它会从ѭ10中获取所有

<p>

元素，并循环遍历它们，就像jquery那样，它将为页面上的每个

<p>

元素添加CSS样式。