Question

我想选择tbody元素的第二个子元素的所有子元素。以下是我想要实现的选择：

<table>
    <thead></thead>
    <tbody>
        <tr></tr>
        <tr>
            <td>I want to select this td</td>
            <td>And this one</td>
        </tr>
    </tbody>
</table>

tbody:nth-child(2) > td 
{
    //insert rules    
}

然而这不起作用。 CSS3是否支持选择伪类的子项？如果没有，任何关于如何实现上述选择的建议将不胜感激。

感谢您输入。

Answer 1

tr:nth-child(2)符合您的要求：

tr:nth-child(2) {
  color: red;

<table>
  <thead></thead>
  <tbody>
    <tr>
      <td>not me</td>
      <td>And not me</td>
    </tr>
    <tr>
      <td>I want to select this td</td>
      <td>And this one</td>
    </tr>
  </tbody>
</table>

tbody:nth-child(2) > td无效，因为只有<tr>元素可以是<tbody>元素的子元素。

Answer 2

选择所有第二个td尝试它：

td:nth-child(2)
{
  //
}

但如果您不想在第二个孩子中选择所有td，您可以尝试：

tr:nth-child(2)
{
  //
}

Answer 3

是的，您可以混合使用伪选择器和子选择器（您是否注意到child上的拼写错误？）：

.a-class:nth-child(2n) > .child-class

我可以在CSS中选择伪类的子级吗？

3 个答案: