CSS Выберите все элементы HTML, кроме первой строки каждой таблицы

Question

Когда у вас есть случайная страница HTML.Мне действительно не важно, что представляет собой содержимое или структура

. Я хочу выбрать все элементы, кроме первой строки (TR) каждой таблицы, которая существует на странице.

следующий селектор не работает:

* :not(tr:first-child){ /* DO SOMETHING */}

Таблица, которая отображается, является простой таблицей без заголовков таблицы, таких как:

<p>123</p>
<table>
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
  <tr>
    <td>a</td><td>b</td><td>c</td>
  </tr>
</table>
<div>bla bla</div>

Answer 1

Возможно, вы захотите стилизовать содержимое таблицы, но не «заголовок».

Простой способ сделать это - использовать td s для содержимого и th s для заголовка., поскольку th используется для определения ячейки заголовка в таблице HTML.(Вы даже можете вспомнить его, говоря: th = t способны h eader.)

Тогда вам нужно будет только нацелиться на td с:

table {
  border-collapse: collapse;
}

/* Add your style here */
td {
  border: 1px solid gray;
  padding: 8px 20px;
  background: #ddd;
}

<p>123</p>
<table>
  <tr>
    <th>1</th><th>2</th><th>3</th><!-- Note the ths here! -->
  </tr>
  <tr>
    <td>a</td><td>b</td><td>c</td>
  </tr>
  <tr>
    <td>d</td><td>f</td><td>g</td>
  </tr>
</table>
<div>bla bla</div>

---

⋅ ⋅ ⋅

Если вы не можете использовать th s…
Поскольку у вас уже могут быть некоторыеСтили, примененные к вашим td s, лучше использовать этот тип селектора, чтобы соответствовать td s, которые находятся в tr s, кроме первого:

table {
  border-collapse: collapse;
}

td {
  border: 1px solid gray;
  padding: 8px 20px;
}

/* Stylize all tds in trs except in the first one! */
table tr:not(:first-child) td {
  background: #ddd;
}

<p>123</p>
<table><!-- All the elements are tds in the trs! -->
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>
  <tr>
    <td>a</td><td>b</td><td>c</td>
  </tr>
  <tr>
    <td>d</td><td>f</td><td>g</td>
  </tr>
</table>
<div>bla bla</div>

Надеюсь, это поможет.

Answer 2

Как насчет этого обходного пути:

* {
  color: green;
}
table tr:first-of-type td {
  color: red;
}

<p>test</p>
<ul>
  <li>item</li>
  <li>item</li>
</ul>
<table>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>
<p>test</p>
<ul>
  <li>item</li>
  <li>item</li>
</ul>
<table>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
  <tr>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>