Question

这是jQuery：

$(document).ready(function() {
    $('#box').click(function() {
        $(this).addClass('fullColor');
    });
});

这是CSS：

#box {
    width:200px;
    height:200px;
    background-color:blue;
    opacity:0.5;
}

.fullColor {
    opacity:1.0;
}

JSFiddle：http://jsfiddle.net/VPW6c/

Answer 1

addClass有效，只是浏览器决定fullColor中的不透明度被#box中的不透明度覆盖。

如果您将声明更改为：

#box.fullColor {
    opacity:1.0;
}

它将应用新的不透明度。

在CCS中，更具体的规则获胜。 #box比.fullColor更具体，因为ID比类更具体。 #box.fullColor同时包含类和ID，因此它比#box和.fullColor更具体。

Answer 2

正确添加了该类。（这可以已经使用适当的开发人员工具进行验证..这也会显示应用了哪些规则，以及原因。）

但是，由于CSS specificity，#box规则将始终赢得.fullColor：

特异性是一种权重类型，它与您的级联样式表（CSS）规则的显示方式有关。如果两个选择器适用于同一个元素，则具有更高特异性的元素将获胜。

使用#box.fullColor作为选择器并观察结果 - 它比#box“更具体”，尽管它仅在.fullColor类存在时应用，因此取胜。

如果不可能（有时会发生这种情况），则可以使用!important，但应谨慎使用。

Answer 3

如果您需要保留这些CSS值，那么不太优雅的解决方案是将！important 添加到fullColor不透明度中：

.fullColor{
    opacity:1.0 !important;
 }

为什么这个悬停addClass不起作用？

3 个答案: