Выберите строки таблицы без заголовков таблицы с помощью селектора CSS

Question

Использование css-селектора Как я должен написать селектор, чтобы только строки таблицы, которые имеют данные, отображали курсор в качестве указателя. Я попробовал ниже, но нет

table tbody tr:not(tr>th)

это кросс-браузерное и работает событие в IE6?

Answer 1

Это не допустимый селектор CSS; Вы не можете поместить комбинаторы внутрь :not().

Лучше всего поместить строки заголовка (т.е. элементы <tr>, содержащие <th> элементы) в <thead>, оставить остальные строки в <tbody> таблицы и просто использовать это:

table tbody tr {
    cursor: pointer;
}

Если вы не можете изменить свой HTML, это невозможно только с помощью CSS-селекторов, особенно если вы не поддерживаете IE6. Используйте вместо этого JavaScript; вот обязательный пример jQuery:

$('table tbody tr:not(:has(th))').css('cursor', 'pointer');

Answer 2

Предполагая , что строка заголовка будет всегда первой строкой, вы можете сделать это:

table tr:not(:first-child) {
    background:red;
}​

Это выбирает все tr элементы , за исключением first-child (как, например, первый из соответствующих элементов).

Этот не не работает в IE6 или любой другой версии IE, кроме IE9.

Но да, если вам требуется поддержка IE6, необходимо использовать Javascript.

Answer 3

вы можете сделать это, используя тег

.

В моем случае таблица выглядит следующим образом:

<table>
  <thead> <tr><th>... </thead>
  <tbody> <tr><td>... </tbody>
</table>

это будет применяться ко всем таблицам:

tbody tr{
      background: yellow;
}

это только для таблиц с заголовком:

thead+tbody tr{
      background: red;
}