javascript - HTML中的CSS样式覆盖失败

我的HTML中有以下代码：

<li class="img1" style="opacity:1 !important; display:block !important;">

但是它没有被应用。使用Firebug（检查按钮，Ctrl + Shift + I），我重新定义了这段代码，它可以正常工作：



有没有办法在我的HTML中正确应用它？

最佳答案

从您的代码的外观来看，这可能是一个更好的解决方案

.img {display:none; opacity:0;}
.img.active {display:block; opacity: 1;}

<div class="caption">
  <ul>
    <li class="img active">Image 1</li>
    <li class="img">Image 2</li>
    <li class="img">Image 3</li>
    <li class="img">Image 4</li>
  </ul>
 </div>

这样可以使您的标记更加整洁和语义化。了解CSS Specificity也很重要

对我来说，使用active作为ID感觉很不对劲。

!important通常用作absolute desperate last measure，通常可以通过理解和利用特异性来克服大多数情况。