2

我需要在元素上添加样式，但该元素没有类或 id，我也不能编辑该部分代码以在其上放置类或 id。

在 jQuery 中，我会使用 .eq[4] 或其他东西来选择它，但我只能使用 CSS。

所以问题是 - 我可以在第二个 <tr> 中设置第二个 <td> 的样式吗？

<table class="tableClass">
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td> I NEED TO STYLE THIS ONE </td>
        <td>...</td>
    </tr>
</table>
4

3 回答 3

3

您可以使用:nth-child()，但您需要将它与the及其父级一起使用：td tr

.tableClass > tr:nth-child(2) > td:nth-child(2)
于 2012-04-16T17:42:39.860 回答
1

这是另一种方法，它也适用于 IE7 和 IE8，以获得更好的兼容性：

.tableClass tr + tr > td + td {
  /* selects 2nd to last td from 2nd to last rows.
     Do something here with some CSS instructions of your choice.
     Beware of thead and th, they aren't expected in your example */
}
.tableClass tr + tr > td + td + td,
.tableClass tr + tr + tr > td + td {
  /* selects 3rd to last td from 2nd to last rows and also
     2nd to last td from 3rd to last rows.
     Cancel here everything you did in previous CSS rule! */
}
  • td + td选择除第一个之外的所有内容，td并td + td + td选择除第一个和第二个之外的所有内容td：使用 2 个 CSS 规则就完成了。您的示例中增加了复杂性，因为您还需要考虑行，但您只需将后一个选择器规则与tr + tr + tr选择器结合起来。
  • 这是替换的绝妙技巧，:not(:first-child)值得了解；当它变得像您的示例中那样复杂时，由您决定是否使用它。
  • 当您处理不同的元素时，+可以用（一般兄弟）替换，例如 h3 然后是 p 然后是 h4 然后再是 p。~这里没有p + p，但仍然有p ~ p.
  • 上面的代码不管在andtbody之间是否有一个元素都有效，因为它不希望每个元素都是 的子元素，而只是一个后代元素。tabletrtrtable
于 2012-04-16T21:46:04.727 回答
1

当然，使用nth-child选择器。在这种情况下，

table tr:nth-child(2) td:nth-child(2)

这是一个很好的解释这是如何工作的。

于 2012-04-16T17:44:00.420 回答