Как выбрать не первый и не последний тд

Question

#MyTable tr+tr:hover {
  background: #dfdfdf;
}

<table id="myTable">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>X</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>X</td>
  </tr>
</table>

Мне удалось навести строку 2 и 3, но при наведении на 2 и 3, как я могу пропустить td (X).Предпочтительно не использовать селектор jQuery.

Answer 1

Используйте : не () , : первый ребенок и : последний ребенок .

#myTable tr:not(:first-child):hover td:not(:last-child) {
      background: #dfdfdf;
}

Также см. этот пример .

Answer 2

Я нашел эту ссылку SO, потому что я не хотел, чтобы строка заголовка подсвечивалась при наведении на нее курсора.Я решил использовать теги <thead> и <tbody> и применить css к строкам в пределах <tbody>.

<style>
    .report tbody tr:hover {
        background-color: khaki;
    }
</style>

<table class="report">
    <thead>
        <tr>
            <th>Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
        </tr>
    </tfoot>
</table>

.

Answer 3

Если вы не хотите применять что-либо к первому и последнему дочерним элементам, вы можете использовать селекторы :first-child и :last-child для переопределения стилей.

#MyTable tr, tr:hover { 
    background: #dfdfdf;
}

#MyTable tr:first-child, tr:last-child {
    background: #000;
}

Это не будет работатьв IE до IE 9, хотя .

Если вы не пользуетесь какой-то поддержкой .

Answer 4

:not(:first-child) и :not(:last-child) должны сделать свое дело, похоже, они поддерживаются всеми последними браузерами.Если вам нужна поддержка IE <9, вы можете добавить классы или заменить <code>td на th '