Html 如何对表行使用第n个子行（奇数），但希望某些行不受css规则的约束？

我的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> 

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

这是指向JSFIDLE的链接

---

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

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

首先，如果您只想在没有特定模式的情况下更改几行奇数，那么只需添加一个异常类就会简单得多。此外，：n子项在计算上相当昂贵，因此除非必要，否则应避免使用

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

看

其次，如果您想重复更改，比如每9次更改颜色：蓝色，您可以利用规范化的CSS:n子语法，再加上CSS的级联特性来覆盖（奇数）选择器

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

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

看

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

可以使用jquery执行此操作：

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

---

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

css不知道内容的语义，所以“odd”表示“DOM顺序的奇数子索引”。如果可以，只需在包含奇数的行中添加一个

odd

类，就可以避免麻烦了。如果无法在HTML中直接执行此操作，请使用JavaScript。

如果您有此类：

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

然后，只需使您的异常类更加具体：

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

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

---

但请注意，第n个孩子是…这是一对夫妇版本回来，但仍然是使用相当多。取决于您的用户群。

您能详细说明您想要什么吗？因此，在该类的行中，您希望每一行（从第一行开始）都是红色的吗？也就是说，您想给td中包含奇数的行上色，与表中所有行的行索引无关？使用JavaScript很简单，但我认为您只想使用CSS，而不想更改html来对相关行应用额外的类？我想他希望4是红色的。如果有一些注释来解释哪些行将以哪种方式进行样式设置，小提琴会更有用。