Question

在此问题之前，我已经搜索了CSS优先级＆＃39;我找到了以下

<div class="blue" style="color:red;">等内联样式的优先级高于定义blue的类color:blue;。此规则在标记和内联之间仍然有效，即内联的优先级高于tag。

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

首先是<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＆＃39;）

我想要更改仅有不同版本的第三个<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>

CSS样式优先级

2 个答案: