Html CSS样式优先级

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

像

这样的内联样式的优先级高于定义

颜色：蓝色的类
蓝色
并且此规则在标记和内联之间仍然有效，即内联的优先级高于标记

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

首先是
s

现在，第一个和第三个
在
位置A有相同的背景图像。
然后我试着改变第三个
的背景

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

根据您的场景进行编辑（使用背景色进行更好的说明，您只需将其替换为位置）：


#课程列表>李：第n个孩子（2n+1）{
背景：红色；
}
#课程列表>李：第n个孩子（2n+2）{
背景：绿色；
}








#课程列表li{背景：url（“路径”）无重复；}
#课程列表>李：第n个孩子（2n+1）{
背景位置：-5px-438px；
}  
#课程列表>李：第n个孩子（2n+2）{
背景位置：-187px-438px；
}










这是我的案子。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>

#课程列表li{背景：url（'path'）不重复；}
#课程列表>李：第n个孩子（2n+1）{
背景位置：-5px-438px；
}  
#课程列表>李：第n个孩子（2n+2）{
背景位置：-187px-438px；
}









您是否实际使用了“位置A”和“位置B”的可能重复项？@JefréN.是的。。？我使用位置A作为-100px-20px的例子，位置B作为类似的例子。你能修改你的例子来显示你的CSS规则是什么样子吗？@JefréN。哦。。。有件事我不知道。你的请求对我帮助很大！在应用
优先级之前，应用的标记很重要。在我的例子中，我将
内联样式
应用于
子标记
而不是
目标标记
哦。。。这是一个很大的错误。我应用的内联样式与您的示例不在同一位置。我在
儿童标签中应用了它
谢谢！！！我意识到
<div></div>
<div></div>
<div style="background-position: 'position B';"></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>
        <div style='background-position:-551px -438px;'></div>
    </li>
</ul>

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

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