CSS每行表格不同颜色

Question

我有一个表格，具有以下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”的颜色，而不会破坏其他行的格式，也就是说，只修改那一行。这有可能做到吗？

- VictorArgentin

Answer 1

您是否正在寻找类似于nth-child CSS 伪类的东西？

如果您想对每个单独的元素进行更精细的控制，则可以考虑为它们应用类并以不同的样式进行设置。

编辑：这里有一些nth-child 的示例。

- alexcoco

---

请注意，这还不完全跨浏览器。https://developer.mozilla.org/En/CSS/%3Anth-child#section_6 - Nathan Kleyn

@Nathan 谢谢，是的，这是CSS3，所以它仍然相对较新，并且在更近期的浏览器版本中得到支持。 - alexcoco

Answer 2

使用纯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);
}

- jackJoe

Answer 3

要为“偶数”和“奇数”行设置样式，请使用CSS3，例如：

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

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

- Sadaqat Ullah

---

很好，如何使其仅影响一个表格，因为我的页面上有许多表格，所以这会影响所有表格，如何确保只影响一个表格？ - Welcome Always

@WelcomeAlways，请给你的表格添加一个ID或者类名，并使用类似 #table_ID tr:nth-child(odd){ //styles here } 的方式进行样式操作。 - Refilon

这应该是被接受的答案，至少对于CSS3来说是如此 :) 真的很简单，而且像魅力一样运作。 - WannaGetHigh

Answer 4

如果你可以不支持IE 7和8，你可以做...

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

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

th.whatever {
  color: #c00;
}

查看实时演示：

http://jsfiddle.net/GFPgB/

- methodofaction

Answer 5

如果你想根据元素内容应用CSS样式，那么这在CSS中是不可能的。另一方面，如果你想根据它们的位置应用CSS样式，你可以使用:nth-child(N)伪类。例如：

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

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

- Jawad

Answer 6

我知道这是一个旧答案，但我用Jquery制作了一个有趣的示例，也许它能帮助某人解决问题。

JSFIDDLE

它会获取文档中的所有<p>元素，并循环遍历它们，在jquery执行此操作时，它将为页面上的每个<p>元素添加CSS样式。

- Refilon

Answer 7

对想要的任何元素应用类，并进行CSS样式设置。 http://jsfiddle.net/robx/wzXAJ/ 例如：应用 <th class="name">Name</th>。

- robx