Как выбрать строку таблицы без использования классов или псевдо-классов?

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

Ссылки на MDN:

• соседний брат-комбинатор
• общий брат-комбинатор