1

我的 HTML 如下所示：

<table>
  <tr class='trclass'><td>1</td></tr>
  <tr class='trclass'><td>2</td></tr>
  <tr><td>not</td></tr>
  <tr class='trclass'><td>3</td></tr>
  <tr class='trclass'><td>4</td></tr>
  <tr class='trclass'><td>5</td></tr>
  <tr class='trclass'><td>6</td></tr>
  <tr class='trclass'><td>7</td></tr>
</table>

我的CSS是这样的：

table tr.trclass:nth-child(odd){color:red}

这是 jsfiddle http://jsfiddle.net/JKmBK/的链接

我想对 tr 上具有“trclass”类的奇数行做不同的样式，可以这样做吗？

4

4 回答 4

2

可以做到，这取决于您希望这是重复更改还是一次性更改。让我们看看两者。

首先，如果您只想更改一些没有特定模式的奇数行，那么简单地添加一个异常类会简单得多。此外， :nth-child 在计算上相当昂贵，因此除非必要，否则应避免使用。

table tr.trclass.exempt {
    color: blue;
}

看到这个更新的小提琴。

其次，如果你想让这个重复变化，比如每 9 次将颜色设为蓝色，你可以利用规范化的 CSS :nth-child 语法，加上 CSS 的级联特性来覆盖（奇数）选择器。

table tr.trclass:nth-child(odd){color:red}

table tr.trclass:nth-child(9n + 9) {
    color: blue;
}

看到这个更新的小提琴。

我希望这有帮助！如果我错过了你的意图，请告诉我。

于 2013-10-09T02:46:02.673 回答
1

CSS 不知道您的内容的语义，因此“奇数”表示“按 DOM 顺序排列的奇数子索引”。如果可以的话，只需odd在包含奇数的行中添加一个类，就可以避免头痛。如果您不能直接在 HTML 中执行此操作，请使用 JavaScript。

于 2013-10-09T03:05:13.517 回答
0

如果你有这个课程：

table tr.trclass:nth-child(odd){color:red;}

然后简单地让你的异常类比这更具体：

table tr.trclass.exceptionClass:nth-child(odd){color:inherit;}

它会自动覆盖不太具体的样式。

但请注意，IE8 不支持nth-child ...这是几个版本，但仍然使用了很多。取决于您的用户群。

于 2013-10-09T04:09:20.403 回答
0

http://jsfiddle.net/stevemarvell/JKmBK/4/

它可以用jquery完成：

$('.trclass:odd').css('color','red');

更有可能的解决方案是添加一个 CSS 类。

于 2013-10-09T02:53:32.753 回答