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

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

没有 pseudo 选择器？好吧，您可以在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次。
• 如果您有三行，则该规则将匹配一次。
• 如果您有5行，则该规则将匹配3次。
• 如果您有六行，则该规则将匹配四次。
• 依此类推...

CSS ID，类和pseudo-classes可以在这种情况下为您提供帮助。

MDN参考：

• Adjacent sibling combinator
• General sibling combinator