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

CSS

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

HTML

<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.

Ответы

Ответ 1

Используйте : not(), : first-child и :. последний ребенок

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

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

Ответ 2

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

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

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

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

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

Ответ 3

Я нашел эту ссылку 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>

Ответ 4

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