Question

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

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

所以问题是 - 我可以设计第二个＆lt; td＆gt;在第二个＆lt; tr＆gt;？

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

Answer 1

您可以使用:nth-child()，但需要将其与 td 和其父tr一起使用：< / p>

.tableClass > tr:nth-child(2) > td:nth-child(2)

Answer 2

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

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

以下是great explanation的工作原理。

Answer 3

这是一种替代方法，也可以在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。
以上代码适用于tbody和table之间是否有tr元素，因为它不希望每个tr都是table的子元素1}}，只是后代。

可以使用CSS根据DOM中的顺序对元素进行样式设置吗？

3 个答案: