Come selezionare non prima td tr e non ultima

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> 

sono riuscito a librarsi riga 2 e 3, ma mentre si hover il 2 e 3, come posso saltare il td (X). Preferibile non usare il selettore jQuery.

Answer 1

Utilizzare :not(), :first-child e :last-child.

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

Vedere anche this example.

Answer 2

Se si sta cercando di non applicare qualcosa al primo e all'ultimo bambino, è possibile utilizzare i selettori :first-child e :last-child per sovrascrivere gli stili.

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

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

questo non funzionerà in IE fino IE 9 though.

Unless you shim in some support.

Answer 3

:not(:first-child) e :not(:last-child) dovrebbero fare il trucco, sembra che siano supportati da tutti gli ultimi browser. Se avete bisogno di IE 9 < supporto è possibile aggiungere classi, o sostituire td 's con th' s

Answer 4

Ho trovato questo SO collegamento, perché non volevo che la mia riga di intestazione per evidenziare quando mi sono trovato su di esso. La soluzione che ho trovato è stata quella di utilizzare i tag <thead> e <tbody> e applicare css alle righe entro <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>