如何绕过通过类自动应用的元素中的样式？

Question

我有ul-li列表，里面有一个span元素。
目前有一个css类应用于span元素[或者，也就是说，所有li中的span元素]，如：

.detail_div ul li span{
//some styles
}

现在对于一个特定的span元素，比如说，last li，我想绕过上面给出的（默认）css类并给出不同的样式。
我怎样才能做到这一点？

请帮帮我。
感谢。

Answer 1

如果再次声明样式不起作用。 E.g：

.detail_div ul li span{
  color: red;
}

然后将!important放在样式之后。 E.g。

.detail_div ul li span{
  color: red !important;
}

对于最后一项，请添加:last-child。 E.g。

.detail_div ul li:last-child span{
  color: red !important;
}

对于中间的某些内容，请使用:nth-child(number)。例如。第二个LI：

.detail_div ul li:nth-child(2) span{
  color: red !important;
}

Answer 2

.detail_div ul li span {
   // Some Styles
}
.detail_div ul li:last-child span {
   // UNDO above styles
}

第二个定义仅匹配最后一个li。

修改：或者您可以指定要为新课程设计的列表项目：

<ul>
   <li><span>Styled</span></li>
   <li class="unstyled"><span>Unstyled</span></li>
   <li><span>Styled</span></li>
</ul>

的CSS：

.detail_div ul li span {
   // some styles
}
.detail_div ul li.unstyled span {
   // undo above styles
}

或者您可以使用nth-child pseudoclass。