HTML中的CSS样式覆盖失败

Question

我的HTML代码中包含此代码：

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

但它没有得到应用。使用Firebug（Inspect按钮，Ctrl + Shift + I），我重新定义了这段代码并且它可以工作：

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

Answer 1

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

.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作为身份证会感觉不对。

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

Answer 2

将内联css转换为<style></style>标记：

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

编辑：为了让某些东西消失，你可以这样做：

$(document).ready(function(){
    $(.someclass).onClick(function(){
        $(.imgwhatever).hide();
    });
});

在Javascript / Jquery文件中。

修改：添加此行：<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>。这使得jquery很有效。