tablesorter nie pokazuje strzałek w górę iw dół

Question

Próbuję użyć wtyczki tablesoter JQuery, ale jeśli chodzi o pokazywanie strzałek, nie wyświetla się strzałka w dół ani w górę, kiedy sortuję malejąco lub rosnąco. Zawsze pokazuje strzałkę w górę iw dół (nieposortowaną strzałkę). Wygląda na to, że table.tablesorter .header {...} zastępuje style table.tablesorter .headerSortUp {...} i table.tablesorter .headerSortDown {...}. Poniżej jest mój kod:

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; 
} 

Moja tabela jest w szablonie prędkość, ale nie sądzę, że wpłynie na ten problem.

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

I umieściłem odpowiednie ikony w odpowiednich folderach. Używam chrome i testowałem to również na firefoxie, ale nie działa w obu. Kiedy sprawdzam element w chromie, widzę, że obraz nagłówka przesłaniał obrazki .headerSortUp i .headerSortDown. Jeśli odznaczę obraz nagłówka, obraz nagłówka .headerSortUp jest wyświetlany poprawnie.

Czy coś tu przeoczyłem? Naprawdę doceniam wartościowe odpowiedzi.

Dzięki

Answer 1

Problem masz to spowodowane css specificity (wypróbować this calculator):

Domyślna niebieski motyw wykorzystuje:

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

tak, aby zastąpić to, musisz wyższy Specyfika css. Jednym ze sposobów byłoby dodanie do klasy sortowania th:

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

Answer 2

Jest to spowodowane zasadą preferencji css. Ostatnia dopasowana reguła jest zawsze stosowana. ważną modyfikatorów, jak przezwyciężyć tę sytuację można zawsze użyć! w przypadku

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

lub

wystarczy umieścić .header css przed .headerSortDown i .headerSortUp i zacznie działać.