CSS style priority

Question

Before this question, I already search 'CSS priority' and I found following

The priority of inline style like <div class="blue" style="color:red;"> is higher than class blue which define color:blue; And this rule is still work between tag and inline, i.e., inline has higher priority than tag.

Now I encounter a obstacle that I don't know. Here, simple example of my case.

First there are <div>s

<div></div>
<div></div>
<div></div> 

and they have CSS

div { backgorund:url('path') no-repeat; }
div:nth-child(2n+1) { background-position: 'position A'; }

Now first and third <div> has same background image at position A. Then I tried change third <div>'s background like

<div></div>
<div></div>
<div style="background-position: 'position B';"></div> 

But the inline style of third <div> is not applied, still the :nth-child's style occupy it. (third <div> still has background-position with 'position A')

I want to change third <div>'s background image that only has different background position. How can I do this?

(I know the priority of inline style is always higher than any others. But in this case, it does not work)

for specification here my code

#courseList li { background:url('path') no-repeat; }
#courseList > li:nth-child(2n+1) {
    background-position:-5px -438px;
}
#courseList > li:nth-child(2n+2) {
    background-position:-187px -438px;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>
        <div style='background-position:-551px -438px;'></div>
    </li>
</ul>

Answer 1

EDITED to your scenario (used background color for better illustration, you can simply replace them for position):

#courseList>li:nth-child(2n+1) {
  background: red;
}

#courseList>li:nth-child(2n+2) {
  background: green;
}

<ul id="courseList">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li style='background: blue;'>
    <div></div>
  </li>
</ul>

Here's a generic example:

div {
  background: red;
  height: 50px;
  width: 50px;
}

div:nth-child(2n+1) {
  background: blue;
}

<div></div>
<div></div>
<div style="background: green;"></div>

Answer 2

#courseList li { background:url('path') no-repeat; }
#courseList > li:nth-child(2n+1) {
    background-position:-5px -438px;
}  
#courseList > li:nth-child(2n+2) {
    background-position:-187px -438px;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>
        <div style='background-position:-551px -438px;'></div>
    </li>
</ul>

Here is my case. The inline style of div do not work since <div> is not target I think.

And, next code follow the rule

#courseList li { background:url('path') no-repeat; }
#courseList > li:nth-child(2n+1) {
    background-position:-5px -438px;
}  
#courseList > li:nth-child(2n+2) {
    background-position:-187px -438px;
}

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li style='background-position:-551px -438px;'>
        <div></div>
    </li>
</ul>