Блог

Я хотел бы выбрать третью строку таблицы без использования псевдокласса или без применения класса к строке (это больше для того, чтобы использовать работу операторов siblings).

Но это также относится к четвертой и следующим строкам.

 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>  

Без псевдо селектора? Ну, вы можете использовать color: initial on 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>  

Используйте это, это работает, если вы не хотите использовать псевдокласс или без применения класса к строке.

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

tbody > tr   tr   tr {
    color: blue;
}
  

Краткий ответ

Ваше правило соответствует любой группе из трех братьев и сестер, а не только первой группе.

Объяснение

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, классы и pseudo-classes существуют, чтобы помочь вам в такого рода ситуациях.

Ссылки MDN:

• Комбинатор смежного брата
• Общий комбинатор родственных элементов