CSS样式优先

Question

这个问题之前，我已经搜索“CSS优先”，我发现以下

像<div class="blue" style="color:red;">内嵌样式的优先级高于blue它定义color:blue;类更高，此规则仍然标签和内联之间的合作即内联具有比标签更高的优先级。

现在我遇到了一个我不知道的障碍。这里是我的例子。

首先有<div>s

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

，他们有CSS

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

现在第一和第三<div>在position A具有相同的背景图片。 然后我试图改变第三<div>的背景像

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

但不适用的第三<div>内联样式，仍是:nth-child的风格占领。 （第三<div>仍具有与“位置A”背景位置）

我想改变仅具有不同 背景位置第三<div>的背景图像。我怎样才能做到这一点？

（我知道的inline style优先级总是比任何其他人高。但在这种情况下 ，它不工作）

为规范我在这里的代码

#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

编辑为您的方案（用于更好的说明的背景颜色，您可以简单地将它们替换为位置）：

#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>

这里有一个通用的例子：

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> 

这里是我的情况。 div的内联样式不起作用，因为我认为<div>不是我的目标。

而且，下一个代码遵循规则

#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>