如何解决表的每行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样式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。