Jak wybrać nie pierwszy TR i nie ostatni td

Question

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> 

udało mi się unosić Row 2 i 3, ale podczas zawisu dniach 2 i 3, to jak mogę pominąć td (X). Najlepiej nie używać selektora jQuery.

Answer 1

Skorzystaj z :not(), i .

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

zobaczyć również this example.

Answer 2

Jeśli nie chcesz zastosować czegoś do pierwszego i ostatniego dziecka, możesz użyć przełączników :first-child i :last-child, aby zastąpić style.

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

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

To nie zadziała w IE do IE 9 though.

Unless you shim in some support.

Answer 3

:not(:first-child) i :not(:last-child) powinien zrobić lewy, wydaje się, że są one obsługiwane przez wszystkie najnowsze przeglądarki. Jeśli potrzebujesz IE < 9 wsparcie można dodać klas lub wymienić td „s ze th” s

Answer 4

znalazłem to tak linku, bo nie chcę, żeby mój wiersz nagłówka, aby podświetlić kiedy unosił się nad nim. Rozwiązaniem, które wymyśliłem, było użycie tagów <thead> i <tbody> i zastosowanie css do wierszy w obrębie <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>