tablesorter non visualizza le frecce su e giù

Question

Sto provando ad usare il plugin del tablesler JQuery ma quando si tratta di mostrare le frecce non mostra né la freccia verso il basso o verso l'alto quando ordino l'ordine discendente o crescente. Mostra sempre freccia su e giù (freccia non ordinata). Sembra table.tablesorter .header {...} sovrascrive gli stili table.tablesorter .headerSortUp {...} e table.tablesorter .headerSortDown {...}. Qui di seguito è il mio codice:

CSS

table.tablesorter .headerSortUp { 
    background-image: url('../images/icons/asc.gif'); 
    background-repeat: no-repeat; 
    background-position: center right; 
} 
table.tablesorter .headerSortDown { 
    background-image: url('../images/icons/desc.gif'); 
    background-repeat: no-repeat; 
    background-position: center right; 
} 
table.tablesorter .header { 
    cursor: pointer; 
    background-image: url('../images/icons/bg.gif'); 
    background-repeat: no-repeat; 
    background-position: center right; 
} 

Il mio tavolo è in un modello di velocità, ma non credo che interesseranno per questo problema.

<table id="harvestTable" class="tablesorter" border="1"> 
     <thead> 
     <tr> 
     <th>Source</th> 
     <th>Time</th> 
     </tr> 
     </thead> 
     <tbody> 
     #foreach($item in $self.harvestlist) 
     #set($harvestId = $item.getFirst('harvestId')) 
... 

E ho incluso le icone relative alle rispettive cartelle. Sto usando il chrome e lo ho testato anche su firefox, ma non funziona in entrambi. Quando controllo l'elemento in chrome, posso vedere che l'immagine di .header ha cancellato le immagini .headerSortUp e .headerSortDown. Se si deseleziona l'immagine di .header, l'immagine .headerSortUp viene visualizzata correttamente.

Ho perso qualcosa qui? Apprezzo molto le risposte preziose.

Grazie

Answer 1

Il problema riscontrato è dovuto alla css specificity (provare this calculator):

L'impostazione predefinita blu tema utilizza:

table.tablesorter thead tr .headerSortUp {} // (0,0,2,3) 

così, al fine di ignorare questo, avrete bisogno di un più elevato specificità css. Un modo sarebbe aggiungere una classe di ordinamento

table.tablesorter thead tr th.headerSortUp {} // (0,0,2,4) 

Answer 2

Ciò è dovuto alla regola di preferenza CSS. L'ultima regola con corrispondenza viene sempre applicata. per superare questa situazione si può sempre usare! importante modificatore, come nel tuo caso

table.tablesorter .headerSortDown { 
background-image: url('../images/icons/desc.gif') !important; 

o

basta mettere .header css prima .headerSortDown e .headerSortUp e sarà iniziare a lavorare.