我可以select CSS 中伪class 的children 吗？

Question

我想要 select tbody 元素的第二个 child 的所有 child td 元素。这是我想要达到的 selection：

<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 是否支持 selecting children 伪类？如果没有，任何有关如何实现上述 selection 的建议将不胜感激。

感谢您的输入。

Answer 1

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

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

Answer 2

到select所有第二个td尝试一下：

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

但是如果你想 select 全部 td 在第二个 child 你可以试试 :

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

Answer 3

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> 元素的子元素。

我可以select CSS 中伪class 的children 吗？

Can I select the children of a pseudo class in CSS?

css

css-selectors

pseudo-class