Overriding nested inline styles

Question

I'm trying to style a link inside of a table, but I've never actually dealt with overriding inline CSS before.

Code

<td class="playertableData">
     <a href="" content="ajax#/ffl/format/pvopop/summary?leagueId=409279&amp;positionId=4&amp;playerId=70419&amp;seasonId=2017" class="flexpop" instance="_ppc" style="text-decoration: none; cursor: pointer;">
         <span style="color:green">26th</span>
     </a>
</td>

and there is another just like it but with color: red. I looked at some of the other topics on overriding but what I saw didn't cover a situation like this, at least not as I read it. Thanks in advance.

(For reference, it looks like this.)

Answer 1

in css

!important changes the rules for override priority of css cascades.

.playertableData > a > span{color:red!important;}

---

in jQuery

$(".playertableData > a > span").css({ color: 'red' });

Answer 2

You can use !important like so:

span{
    color:red!important;
}