如何在不使用类或伪类的情况下选择表行？

Question

我想选择表的第三行而不使用伪类或不将行应用于行（更多的是练习兄弟运算符的工作）。

但它也适用于第四行和后续行。

tbody > tr + tr + tr {
    color: blue;
}

    <table>
        <tbody>
            <tr><td>Hello</td></tr>
            <tr><td>World</td></tr>
            <tr><td>Should be blue</td></tr>
            <tr><td>Should not be blue</td></tr>
        </tbody>
    </table>

Answer 1

没有伪选择器？那么你可以在color: initial上使用tbody > tr + tr + tr + tr（你可以使用tr重置你在这个选择器中第三个initial上应用的所有属性 - 请参阅下面的演示：

tbody > tr + tr + tr {
    color: blue; /* styles for the third row */
}
tbody > tr + tr + tr + tr{
    color: initial; /* reset all the styles applied in the third row here */
}

<table>
        <tbody>
            <tr><td>Hello</td></tr>
            <tr><td>World</td></tr>
            <tr><td>Should be blue</td></tr>
            <tr><td>Should not be blue</td></tr>
        </tbody>
    </table>

Answer 2

使用此选项，如果您不想使用伪类或不将行应用于该行，则可以使用它。

tbody > tr + tr + tr + tr {
    color: initial;
}

tbody > tr + tr + tr {
    color: blue;
}

Answer 3

简答

您的规则匹配任意三个兄弟姐妹组，而不仅仅是第一组。

---

说明

CSS相邻兄弟组合子（+）紧跟一个兄弟元素后面的元素。

相比之下，一般兄弟组合子（~）瞄准一个兄弟元素后面的元素（它不一定是下一个）。

您的规则的问题是它匹配两个方案。

这是你的代码：

tbody > tr + tr + tr {
  color: blue;
}

<table>
  <tbody>
    <tr><td>Hello</td></tr>    
    <tr><td>World</td></tr>    
    <tr><td>Should be blue</td></tr>    
    <tr><td>Should not be blue</td></tr>    
  </tbody>  
</table>

tr + tr + tr表示：选择紧跟在表行之后的表行，该表行也紧跟在表行之后。您有四行，因此您的代码中存在两次：

比赛1

比赛2

其他潜在的匹配：

• 如果您有一行，则规则将匹配0次。
• 如果您有两行，则规则将匹配0次。
• 如果您有三行，则规则将匹配一次。
• 如果您有五行，则规则将匹配三次。
• 如果您有六行，则规则将匹配四次。
• 等等...

CSS ID，类和pseudo-classes可以帮助您解决这些问题。

MDN参考：

• Adjacent sibling combinator
• General sibling combinator